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

Change or click event of mat-button-toggle

提问by prabhat gundepalli

I have a mat-button-toggle-group which has 5 mat-button-toggle. I need to fire an event on the click or on the change of the val, although I prefer it be a click event.

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

The documentation provided hereshows there is no click event, but there is a change event.

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

I have tried the change event too (as shown below) , but the event is not getting triggered.

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

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

In My .ts file

在我的 .ts 文件中

import {MatButtonToggleModule} from '@angular/material/button-toggle';

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

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

How to trigger the above change function?

如何触发上述更改功能？

回答by Fateme Fazli

it should be :

它应该是 ：

html:

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>

component:

成分：

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

check this working stackblitz

检查这个工作stackblitz

回答by BeatriceThalo

Tangentially related, for anyone using fastclickto remove the 300ms delay on mobile webviews, here is what I needed to do to get the <mat-button-toggle-group>'s changeevent to fire.

切线相关，对于任何使用fastclick消除移动网络视图上的 300 毫秒延迟的人来说，这是我需要做<mat-button-toggle-group>的change才能触发's事件。

Explanation: It appears that in a desktop browser, the mat-button-toggle's toggleIt handler (leading to the group's changedispatcher) is listening to the button's clickevent, but in a mobile webview, the toggleIt handler is listening to the button's touchendevent directly. Certain mobile webviews have a built-in listener on all touchendevents which waits 300ms to see if the mobile user is single or double clicking, then dispatches the proper clickor dblclickevent. Fastclick interferes with that by also listening for touchendevents which it intercepts so that the slow webview touchendHandler is never called, and dispatches an immediate single-click event itself. However in our case, the intercepted touchendevent also won't call toggleIt. So we turn off the interception, which won't hurt the time it takes for toggleIt to get called (our UX), since the webview only delays the clickHandlers, not the mat-button-toggle's direct touchendHandler.

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

in main.ts

在 main.ts

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

in myComponent.ts

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

in myComponent.html

在 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>

in myComponent.css

在 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;
}