我们在Angular 2的模板标签中使用* ngIf,之后如果我们从模板控件内部触发click事件,则模板内的HTML将被删除或更改。
这是我正在使用的转发器控件,
@Component({
selector: "repeater",
template:
`
<div *ngIf='children'>
<div *ngFor='let current of source'>
<template [ngTemplateOutlet]="children._results[0]" OutletContext]="{ item: current }">
</template>
</div>
</div>`
})
export class Repeater {
@ContentChildren(TemplateRef)
children: QueryList<TemplateRef<any>>
@Input()
source: Array<any>;
}
这是我的应用程序组件代码
@Component({
selector: 'my-app',
template: `<repeater [source]="dllApprovalStatus">
<template let-data="item">
{{data.name}}
<p *ngIf='data.name==1' (click)='myclick(data.name)'> Array value {{data.name}}</p>
</template>
<repeater>`,
})
export class App {
name:string;
dllApprovalStatus: any = [{ name: 1 }, { name: 1 }, { name: 0 }];
constructor() {
this.name = 'Angular2'
}
myclick(data: any) {
alert(data);
}
}
在这里,我还制作了一个plunker repo http://plnkr.co/edit/XHZz52?p=preview。
此处如果单击输出的数组列表,模板将更改。 这在Angular 2 rc4中运行良好,但我们已升级到Angular2~2.2