zoukankan      html  css  js  c++  java
  • [Angular 2] Generate and Render Angular 2 Template Elements in a Component

    Angular 2 Components have templates, but you can also create templates inside of your templates using Angular 2 ViewContainer’s createEmbeddedView for more visual control of how you want to generate elements inside of your Angular 2 templates.

    import {Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, ViewChild} from '@angular/core';
    import {SimpleService} from "../../serivces/simple.service";
    import {WidgetThree} from "../widgets/widget-three.component";
    
    @Component({
        moduleId: module.id,
        selector: 'home',
        templateUrl: 'home.component.html'
    })
    export class HomeComponent {
    
        @ViewChild('container', {
            read: ViewContainerRef
        }) container;
        @ViewChild('template') template;
    
        constructor(private resolver: ComponentFactoryResolver, private simpleService: SimpleService) {
        }
    
        ngAfterContentInit(){
            const WidgetFactory = this.resolver.resolveComponentFactory(WidgetThree);
            this.container.createComponent(WidgetFactory);
            this.container.createComponent(WidgetFactory);
            this.container.createComponent(WidgetFactory);
            this.container.createComponent(WidgetFactory);
            this.container.createComponent(WidgetFactory);
        }
    
        onClick(){
            this.container.createEmbeddedView(
                this.template
            )
        }
    
    }
    <template #template>
        <h3>tempalte title</h3>
        <section>tempalte section</section>
        <footer>template footer</footer>
    </template>
  • 相关阅读:
    6.11 考试修改+总结
    6.10 考试修改+总结+颓废记
    我们都一样
    【HDU 5730】Shell Necklace
    【SPOJ 8093】Sevenk Love Oimaster
    【BZOJ 3238】【AHOI 2013】差异
    【UOJ #131】【NOI 2015】品酒大会
    【SPOJ 220】Relevant Phrases of Annihilation
    【POJ 3177】Redundant Paths
    【POJ 2186】Popular Cows
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5901581.html
Copyright © 2011-2022 走看看