Angular中的模板引用/本地变量（属性前加井号#）

定义

模板引用变量通常是对模板中 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- 前缀代替 #