zoukankan      html  css  js  c++  java
  • [Angular 2] Create template with Params

    Angular 2 templates have a special let syntax that allows you to define and pass a context when they’re being generated.

    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,
                {
                    desc: 'Good'
                }
            )
        }
    
    }

    We pass in an Object "desc: Good",  to the template, in tempalte, we use "let-" keyword to define the variable which we can reference to, and the object will be the 'context' for the template.

    <template #template let-desc="desc">
        <h3>tempalte {{desc}}</h3>
        <section>tempalte {{desc}}</section>
        <footer>template {{desc}}</footer>
    </template>
  • 相关阅读:
    Redis在windows下安装过程
    Java中如何使用Redis做缓存
    Redis学习记录之Java中的初步使用
    Java多线程实现简单的售票程序
    list,set,map,数组间的相互转换
    高性能Java Web 页面静态化技术(原创)
    Nginx windows下搭建过程
    高并发解决方案--负载均衡
    高并发解决方案--页面静态化
    phpcms 自定义方法
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5901625.html
Copyright © 2011-2022 走看看