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

【问题标题】：What does the syntax #foo="myFoo" in template mean?模板中的语法 #foo="myFoo" 是什么意思？
【发布时间】：2021-02-03 13:51:56
【问题描述】：

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

 <mat-menu #menu="matMenu">

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

【问题讨论】：

标签： angular

【解决方案1】：

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

模板引用变量通常是对 DOM 元素的引用模板内。它也可以引用一个指令（其中包含一个 component)、元素、TemplateRef 或 Web 组件

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

【讨论】：

这是什么意思？如果在组件上声明变量...我们如何在组件上声明变量？
用哈希。（例如：<div #adiv></div>。您现在可以使用adiv，因为您已经创建了一个引用。您可以从您的.ts 文件以及ElementRef 访问它，因为它是一个标准的HTML 标记。
看来等号后面出现的不是变量名而是类型。因此，当您使用 #menu="matMenu" 或 #var="ngModel" 时，您将确定引用我的 'menu' 或 'var' 的对象分别是 matMenu 或 ngModel 类型的指令。或者至少看起来是这样。
这与“如果您在标准 HTML 标记上声明变量，则变量引用元素”有何不同？两者都在 htmlelement 上，一个指代组件，另一个指代元素？没有意义。我仍然不明白“组件”部分。
我不懂你不懂的。是的 Template-Reference-Variable 的工作原理相同，它会在您放置它的任何位置创建一个引用。在组件中，您可以：<my-component #mycomp></my-comp>。现在您可以从其他地方引用此特定实例。就像 ElementReference 一样，但现在我们有了 MyComponent Reference。