更改或单击 mat-button-toggle 的事件

Question

我有一个 mat-button-toggle-group，它有 5 个 mat-button-toggle。我需要在单击或更改 val 时触发一个事件，尽管我更喜欢它是一个单击事件。

here 提供的文档显示没有点击事件，但有更改事件。

我也尝试过更改事件（如下所示），但事件没有被触发。

 <mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="rowAction">
  <mat-button-toggle value="raw_swift_msg" (change)="onValChange(value)" matTooltip="View Message">
    <i class="fa fa-eye" style="color:#455A64" aria-hidden="true"></i>
  </mat-button-toggle>
  <mat-button-toggle value="message_comment" matTooltip="Message Comment">
    <i class="fa fa-comments" style="color:#455A64" aria-hidden="true"></i>
  </mat-button-toggle>
  <mat-button-toggle value="link_trade" hasAccess id="LinkMessagePopup" matTooltip="Link Message">
    <i class="fa fa-link" style="color:#455A64" aria-hidden="true"></i>
  </mat-button-toggle>
  <mat-button-toggle value="audit_trail" matTooltip="View Audit">
    <i class="fa fa-history" style="color:#455A64" aria-hidden="true"></i>
  </mat-button-toggle>
   <mat-button-toggle hasAccess id="MessagePopup" value="move_message" matTooltip="Move message">
    <i class="fa fa-exchange" style="color:#455A64" aria-hidden="true"></i>
  </mat-button-toggle> 
  <mat-button-toggle value="log" matTooltip="View log">
    <i class="fa fa-book" style="color:#455A64" aria-hidden="true"></i>
  </mat-button-toggle>
</mat-button-toggle-group>

在我的 .ts 文件中

从“@angular/material/button-toggle”导入 {MatButtonToggleModule}；

onValChange(val: string) {
 this.selectedVal = val;
}   

如何触发上述变化功能？

Answer 1

应该是：

html:

 <mat-button-toggle-group #group="matButtonToggleGroup">
  <mat-button-toggle value="raw_swift_msg" (change)="onValChange($event.value)" matTooltip="View Message">
    <i class="fa fa-eye" style="color:#455A64" aria-hidden="true"></i>
  </mat-button-toggle>
  <mat-button-toggle (change)="onValChange($event.value)" value="message_comment" matTooltip="Message Comment" >
    <i class="fa fa-comments" style="color:#455A64" aria-hidden="true"></i>
  </mat-button-toggle>
</mat-button-toggle-group>

组件：

onValChange(value){
     console.log(value)
}

检查这个working stackblitz

Answer 2

在整个 mat-button-toggle-group 上获取更改事件的更简单的解决方案是在组上设置更改事件，而不是每个切换按钮。

<mat-button-toggle-group (change)="onValChange($event.value)">
    <mat-button-toggle value="bold">Bold</mat-button-toggle>
    <mat-button-toggle value="italic">Italic</mat-button-toggle>
    <mat-button-toggle value="underline">Underline</mat-button-toggle>
</mat-button-toggle-group>

现在你可以在你的组件中监听事件了：

onValChange(value) {
    console.log(value);
}

为我工作。

Answer 3

切线相关，对于任何使用 fastclick 来消除移动 webview 上 300 毫秒延迟的人，我需要执行以下操作才能触发 <mat-button-toggle-group> 的 change 事件。 p>

解释：似乎在桌面浏览器中，mat-button-toggle 的 toggleIt 处理程序（导致组的 change 调度程序）正在侦听按钮的 click 事件，但在移动 web 视图中，toggleIt 处理程序正在直接监听按钮的touchend 事件。某些移动 webview 对所有 touchend 事件都有一个内置侦听器，该侦听器等待 300 毫秒以查看移动用户是单击还是双击，然后调度正确的 click 或 dblclick 事件。 Fastclick 通过侦听它拦截的touchend 事件来干扰这一点，因此永远不会调用慢速 webview touchendHandler，并调度一个即时单击事件本身。然而在我们的例子中，被拦截的touchend 事件也不会调用toggleIt。所以我们关闭拦截，这不会影响toggleIt被调用（我们的UX）所花费的时间，因为webview只延迟clickHandlers，而不是mat-button-toggle的直接touchendHandler .

在 main.ts 中

import * as FastClick from 'fastclick';
FastClick['attach'](document.body); // tslint:disable-line:no-string-literal

在 myComponent.ts 中

public ngAfterViewInit(): void {
  const collection = document.getElementsByClassName('mat-button-toggle-label-content');
  Array.from(collection).forEach((eachHandlingElement: Element) => {
    eachHandlingElement.classList.add('needsclick'); // deeper element
  });
}

在 myComponent.html 中

<mat-button-toggle-group [(ngModel)]="mySelectedTabIndex" (change)="applyMySearch()">
  <mat-button-toggle *ngFor="let eachTabTitle of myTabTitles; let eachTabIndex = index" [value]="eachTabIndex"
    [class.my-highlight]="eachTabIndex === mySelectedTabIndex" [disabled]="wantDisabled(eachTabIndex)">
    {{ eachTabTitle }}
  </mat-button-toggle>
</mat-button-toggle-group>

在 myComponent.css 中

mat-button-toggle {
  flex-grow: 1; /* widen visible area */
}
mat-button-toggle ::ng-deep .mat-button-toggle-label-content {
  width: stretch; /* widen clickable area */
}
mat-button-toggle-group  {
  width: 100%;
}
.my-highlight {
  color: red;
}