代码之家 › 专栏 › 技术社区 › prabhat gundepalli

更改或单击Mat按钮切换事件

angular-material typescript angular html javascript

prabhat gundepalli · 技术社区 · 8 年前

我有一个mat button toggle组,它有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;
}

如何触发上述变更功能?

2 回复 | 直到 8 年前

Lia 8 年前

应该是:

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

BeatriceThalo 8 年前

无关的,任何人使用 快速点击 为了消除移动网络视图上的300毫秒延迟,我需要做的是 <mat-button-toggle-group> 的 change 开火事件。

说明:在桌面浏览器中,mat button toggle的toggle it处理程序(导致组的 改变 调度员)正在收听按钮的 click 事件,但在移动webview中,toggleit处理程序正在监听按钮的 touchend 直接事件。某些移动网络视图在所有 接触端 等待300毫秒以查看移动用户是单击还是双击的事件,然后发送适当的 点击 或 dblclick 事件。fastclick通过监听 接触端 它拦截的事件,这样慢的webview touchendhandler就永远不会被调用,并发送一个即时的单击事件本身。但是在我们的案例中 接触端 事件也不会调用toggleit。所以我们 关闭拦截 ,这不会影响toggle it被调用所需的时间(我们的ux),因为webview只延迟clickhandler,而不是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;
}