定义
模板引用变量通常是对模板中 DOM 元素的引用。它还可以引用指令(包含组件)、元素、TemplateRef 或 Web Component — angular中文文档
示例
<nz-table #filterTable [nzData]="listOfData">
<thead>
<tr>
<th>{{ column.name }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of filterTable.data">
<td>{{ data.id }}</td>
</tr>
</tbody>
</nz-table>
- 首先,
nz-table
是一个自定义组件,加入#filterTable
属性的意思是在当前文档作用域创建一个变量filterTable
,来表示这个组件本身,可以在外部调用这个组件的对外方法和对外变量,相当于把nz-table
这个组件类(class)拿到了外部(没有创建实例,只是类本身)。 - 这个示例中,想把
nz-table
组件的data拿出来用,就可以使用filterTable.data
来获取(为什么要从nz-table
中获取,因为传入的原始值在nzData
中,组件内进行了一些处理,内部使用data
类型,这样可以避免在外部再次处理listOfData
数据)
注意
- 模板引用变量(
#filterTable
)与模板输入变量(let data
)不同,所以: - 模板引用变量的范围是整个模板。因此,不要在同一模板中多次定义相同的变量名,因为它在运行时的值将不可预测。
- 可以用 ref- 前缀代替 #