[Angular 2] Set Values on Generated Angular 2 Templates with Template Context

Angular2模板上下文传递

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 50 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/6075093.html

文章标签：

#javascript #ViewUI

本文介绍Angular2中模板的特殊let语法，演示如何定义并传递上下文数据。通过一个实例展示了如何创建模板并在运行时为其提供数据。

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

We have template:

<template #template let-description="description">
    <h2>My {{description}} template</h2>
    <button>My {{description}} button</button>
</template>

And we define 'description' variable to let data to pass into.

import {Component, ViewChild, ViewContainerRef, ComponentFactoryResolver} from "@angular/core";
import {WidgetThree} from "../widgets/widget-three.component";
@Component({
    selector: 'home',
    template: `
<button (click)="onClick()">Create Template</button>
<div #container></div>

<template #template let-description="description">
    <h2>My {{description}} template</h2>
    <button>My {{description}} button</button>
</template>
`
})
export class HomeComponent{
    @ViewChild('container', {read:ViewContainerRef}) container;
    @ViewChild('template') template;

    constructor(){}

    onClick(){
        this.container.createEmbeddedView(this.template, {
            description: 'sweet'
        });
    }
}