angular - 模板中的语法 #foo="myFoo" 是什么意思？

Question

我了解主题标签语法的<input #myinput >含义，提供了访问元素的名称，但我不了解以下语法，来自 angular material 网站中的示例：

 <mat-menu #menu="matMenu">

等号后面的表达式是什么意思？它是某种混叠吗？如果是这样，为什么不直接写<mat-menu #matMenu>？

标签： angular

Answer 1

使用#您可以创建一个引用，以便您可以从组件中的其他位置调用。正如文档所说：

模板引用变量通常是对模板中 DO​​M 元素的引用。它还可以引用指令（包含组件）、元素、TemplateRef 或 Web 组件

Angular 根据您声明变量的位置为每个模板引用变量分配一个值：

• 如果在组件上声明变量，则变量引用组件实例。
• 如果您在标准 HTML 标记上声明该变量，则该变量引用该元素。
• 如果您在元素上声明变量，则该变量引用一个 TemplateRef 实例，该实例表示模板。
• 如果变量在右侧指定名称，例如#var="ngModel"，则该变量引用具有匹配exportAs名称的元素上的指令或组件。

您可以在此处阅读更多信息：模板参考变量 | 角度.io