我理解什么是标签语法<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
引用相同的组件指令,因此它是多余的。