以下是一些关于 Angular 模板引用变量的基本概念：
1. 模板中的元素引用
在模板中，可以使用 # 符号声明一个引用变量，然后在模板中的其他位置引用它。这通常用于获取 DOM 元素的引用。
<!-- 模板 -->
<input #inputRef placeholder="Type something">
<button (click)="logInputValue(inputRef.value)">Log Input Value</button>
在这个例子中，#inputRef 声明了一个引用变量，然后通过 (click) 事件绑定调用 logInputValue() 方法，并传递输入框的值作为参数。
// 组件类
export class AppComponent {
logInputValue(value: string) {
console.log('Input value:', value);
}
}
2. 模板中的组件引用
引用变量也可以用于获取对应组件的引用，以便在模板中执行一些操作。
<!-- 模板 -->
<app-custom-component #customComponentRef></app-custom-component>
<button (click)="callCustomComponentMethod(customComponentRef)">Call Method</button>
在这个例子中，#customComponentRef 声明了一个引用变量，然后通过 (click) 事件绑定调用 callCustomComponentMethod() 方法，并传递组件引用作为参数。
// 组件类
export class AppComponent {
callCustomComponentMethod(componentRef: CustomComponent) {
componentRef.customMethod();
}
}
需要注意的是，在上述例子中，CustomComponent 是一个自定义组件的类，确保在组件类中定义了 customMethod() 方法。
模板引用变量是 Angular 模板中一个灵活且强大的特性，允许在模板中获取对应元素或组件的引用，并通过组件类中的方法进行操作。这种机制对于处理模板中的特定元素或组件非常有用，特别是在需要执行一些操作或获取值时。
转载请注明出处：http://www.zyzy.cn/article/detail/4927/Angular