Question

我有一个mat-button-toggle-group，其中有5个mat-button-toggle。我需要在点击或更改价位时触发一个事件，尽管我更喜欢将它作为点击事件。

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

我也尝试了change事件（如下所示），但未触发该事件。

using (var writ = new StreamWriter(fileStream, Encoding.UTF8))
{
    using (var csvWrit = new CsvWriter(writ))
    {
        //logic
        csvWrit.NextRecord();
    }   
}
ZipFile.CreateFromDirectory(<sourcefileName>, <destFileName>);

在我的.ts文件中

从'@ angular / material / button-toggle'导入{MatButtonToggleModule};

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

如何触发上述更改功能？

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 来消除移动网络视图上300毫秒延迟的用户，这是我需要做的，以便将<mat-button-toggle-group>的{{1}}事件火。

说明：似乎在桌面浏览器中，mat-button-toggle的toggleIt处理程序（导致组的change调度程序）正在侦听按钮的change事件，但在移动Web视图中，toggleIt处理程序正在直接侦听按钮的click事件。某些移动Web视图在所有touchend事件上都有内置的侦听器，该事件等待300ms来查看移动用户是单击还是双击，然后调度适当的touchend或click事件。 Fastclick通过侦听它拦截的dblclick事件来干扰它，以便从不调用慢速Webview touchendHandler并自行调度立即单击事件。但是，在我们的情况下，被拦截的touchend事件也不会调用toggleIt。因此，我们关闭拦截，这不会影响toggleIt调用（我们的用户体验）所花费的时间，因为Webview仅延迟clickHandlers，而不延迟mat-button-toggle的直接touchendHandler

在main.ts

touchend

在myComponent.ts中

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

在myComponent.html

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

中

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

垫按钮切换的更改或单击事件

3 个答案: