＃group =“ matButtonToggleGroup”是什么意思？

Question

来自this example：

<mat-button-toggle-group #group="matButtonToggleGroup">
  <mat-button-toggle value="left" aria-label="Text align left">
    <mat-icon>format_align_left</mat-icon>
  </mat-button-toggle>
  <mat-button-toggle value="center" aria-label="Text align center">
    <mat-icon>format_align_center</mat-icon>
  </mat-button-toggle>
  <mat-button-toggle value="right" aria-label="Text align right">
    <mat-icon>format_align_right</mat-icon>
  </mat-button-toggle>
  <mat-button-toggle value="justify" disabled aria-label="Text align justify">
    <mat-icon>format_align_justify</mat-icon>
  </mat-button-toggle>
</mat-button-toggle-group>
<div class="example-selected-value">Selected value: {{group.value}}</div>

#group是什么意思？通常，它表示variable declaration，但在这里它必须表示不同的含义。如果我不使用matButtonToggleGroup作为值，则会得到

模板解析错误：没有将“ exportAs”设置为“ matButtonToggleGroup2”的指令

I saw还有一个#toggleGroup。在official API documentation中我找不到两者的任何东西。

Answer 1

[#group-是一个模板引用变量，您可以根据需要命名]

matButtonToggleGroup-是exportAs，这是用来在模板中导出组件实例的名称。除非您有权访问原始指令，否则无法更改它。

                         #group="matButtonToggleGroup"
                        /              \
template reference variable         exportAs 
[exportAs名称是在MatButtonToggleGroup指令https://github.com/angular/components/blob/92bbc77050a911f6614ce55280b5cc8e634d9ac0/src/material/button-toggle/button-toggle.ts#L108]中定义的>
您可以将exportAs视为指令的公共API。如果一个元素上的指令过多，则可以通过知道其exportAs名称来获得对特定指令的引用。

另请参见

• What is #auto attribute here and why it is required