ts创建多个子节点绑定不同的回调函数
时间: 2024-09-18 20:11:46 浏览: 34
在TypeScript中,如果你想要在一个组件的模板中创建多个子元素,并为每个子元素绑定不同的事件处理函数(如点击、输入等),你可以使用`*ngFor`指令来迭代数组或对象,同时为每个迭代项设置对应的回调。例如:
```html
<template #childTemplate let-item="item">
<button (click)="onClick(item)">点击{{ item.name }}</button>
</template>
<div *ngFor="let item of items; let i = index">
<ng-container [ngTemplateOutlet]="childTemplate" [ngTemplateOutletContext]="{ item: item }"></ng-container>
</div>
// TypeScript
export class YourComponent {
items = [{ name: 'A' }, { name: 'B' }, { name: 'C' }];
onClick(item) {
console.log(`Clicked on item ${item.name}`);
// 这里可以编写针对每个item的不同操作
}
}
```
在这个例子中,`childTemplate`是一个内部模板引用,`ngFor`会为`items`中的每个对象生成一个新的按钮元素,并通过`ngTemplateOutletContext`将当前的`item`传递给`onClick`方法,从而触发不同的回调。