web-dev-qa-db-ja.com

mat-button-toggleのイベントを変更またはクリック

5つのマットボタントグルを持つマットボタントグルグループがあります。クリックイベントの方が好きですが、クリック時または値の変更時にイベントを発生させる必要があります。

提供されるドキュメント 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>

My .tsファイル

'@ angular/material/button-toggle'から{MatButtonToggleModule}をインポートします。

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

上記の変更機能をトリガーするにはどうすればよいですか？

javascripthtmlangulartypescriptangular-material
4
prabhat gundepalli

そのはず ：

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

9
Fateme Fazli

接線的に関連し、モバイルWebビューの300ミリ秒の遅延を削除するためにfastclickを使用するすべての人にとって、<mat-button-toggle-group>のchangeイベントを発生させるために必要なことは次のとおりです。

説明：デスクトップブラウザーでは、mat-button-toggleのtoggleItハンドラー（グループのchangeディスパッチャーにつながる）がボタンのclickイベントをリッスンしているようですが、モバイルWebビューでは、 toggleItハンドラーは、ボタンのtouchendイベントを直接リッスンしています。特定のモバイルWebビューには、すべてのtouchendイベントに組み込みリスナーがあり、モバイルユーザーがシングルクリックかダブルクリックかを300ms待機してから、適切なclickまたはdblclickをディスパッチしますイベント。 Fastclickは、インターセプトするtouchendイベントもリッスンすることによってそれを妨害し、遅いwebview touchendHandlerが呼び出されないようにし、すぐにシングルクリックイベント自体を送出します。ただし、この例では、インターセプトされたtouchendイベントもtoggleItを呼び出しません。したがって、我々はインターセプトをオフにするです。これは、toggleItが呼び出されるのにかかる時間（UX）に影響を与えません。これは、webviewがmatt-button-toggleの直接のtouchendHandlerではなく、clickHandlerを遅延させるだけだからです。 。

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;
}
0
BeatriceThalo