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>
  • 相关阅读:
    SQL SERVER的检查点checkpoint
    MySQL备份说明
    声明对象和创建对象的区别
    getParameter的用法总结
    Jsp的九大对象,七大动作,三大指令
    为什么内部类访问的外部变量需要使用final修饰
    java synchronized详解
    网上选课系统需求说明书
    第三次作业
    第二次作业
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5901581.html
Copyright © 2011-2022 走看看