#group="matButtonToggleGroup" 是啥意思？

Posted 2023-03-05

【中文标题】#group="matButtonToggleGroup" 是啥意思？

【英文标题】：What does #group="matButtonToggleGroup" mean?#group="matButtonToggleGroup" 是什么意思？

【发布时间】：2020-07-27 09:39:37

【问题描述】：

取自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 作为值，我会得到 ​​p>

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

我saw 还有一个#toggleGroup。在official API documentation 中我找不到两者的相关信息。

【问题讨论】：

此用法可用于创建对具有 (exportAs: 'matButtonToggleGroup2') 的指令的引用您可以查看此示例***.com/questions/38582293/…

【参考方案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