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>
  • 相关阅读:
    结对编程——四则运算
    需求分析
    结对编程
    调查问卷的心得体会
    软件工程课初步目标
    软件工程课程建议
    结对编程--fault,error,failure
    结对编程--四则运算
    需求分析
    结对编程
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5901625.html
Copyright © 2011-2022 走看看