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>
  • 相关阅读:
    Django中怎么做图片上传--图片展示
    Django框架获取各种form表单数据
    django中的数据库迁移
    flask中单选、多选、下拉框的获取
    解析web应用处理流程
    细说flask数据库迁移
    vue和jQuery嵌套实现异步ajax通信
    java
    nginx的主要用途
    mvn常用命令
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5901581.html
Copyright © 2011-2022 走看看