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



我理解什么是标签语法<input #myinput >,提供访问元素的名称,但我不理解以下语法,从angular material网站中的一个例子来看:

<mat-menu #menu="matMenu">

等号后面的表达式是什么意思?这是某种混叠吗?如果是,为什么不写<mat-menu #matMenu>呢?

使用#可以创建一个引用,这样就可以从组件中的其他位置调用。正如文件所说:

模板引用变量通常是对DOM元素的引用在模板中。它也可以引用指令(该指令包含组件(、元素、TemplateRef或web组件

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

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

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

虽然接受的答案是正确的,并链接到一个包含答案的文档,但我认为有必要进一步展开解释。

tl;dr–如果有多个指令应用于元素,则此语法#var="directiveExportAsName"可用于针对元素上的特定指令。

答案很长

具体地说;指定名称的变量";部分

代码示例为:

<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">
<!-- removed for brevity -->
</form>
<div [hidden]="!itemForm.form.valid">
<p>{{ submitMessage }}</p>
</div>

他们的解释(重点是我的(:

NgForm指令演示了通过引用指令的exportAs名称来获得对不同值的引用。。。如果没有ngForm属性值,itemForm的参考值将是HTMLFormElement<form>。如果元素是"角度组件",则没有属性值的引用将自动引用该组件实例。否则,没有值的引用将引用DOM元素,即使该元素应用了一个或多个指令。

对于这个特殊的案例<mat-menu #menu="matMenu">,尽管官方示例使用了它,但我认为它没有必要。根据该文件;如果一个元素是Angular Component,那么没有属性值的引用将自动引用该组件实例";并且由于选择器mat-menu和导出为名称matMenu引用相同的组件指令,因此它是多余的。

最新更新