模板中的语法 #foo="myFoo" 是啥意思？

Posted 2023-03-05

【中文标题】模板中的语法 #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>？

【问题讨论】：

这能回答你的问题吗？ What does Angular 2 hashtags in template mean?

不是真的，因为这个讨论只是关于语法“#name”，而不是#name='[something]'。然而，这个问题在下面的答案（第 4 个项目符号）中得到了回答。

【参考方案1】：

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

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

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

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

您可以在这里阅读更多内容：template-reference-variables | angular.io

【讨论】：

这是什么意思？如果在组件上声明变量...我们如何在组件上声明变量？

用哈希。 （例如：<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。