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

Question

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

此处提供的文档显示没有单击事件，但有更改事件。

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

 <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)
}

检查这个工作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消除移动网络视图上的 300 毫秒延迟的任何人，这是我需要做的才能<mat-button-toggle-group>的change事件。

说明：似乎在桌面浏览器中，mat-button-toggle 的 toggleIt 处理程序（导致组的change调度程序）正在侦听按钮的click事件，但在移动网络视图中，toggleIt 处理程序正在侦听按钮的touchend事件直接地。 某些移动 web 视图在所有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;
}