wake-up-neo.com

Ändern Sie oder klicken Sie auf das Ereignis des Mattenschalters

Ich habe eine Matte-Button-Toggle-Gruppe, die 5 Matte-Button-Toggle hat. Ich muss ein Ereignis auf den Klick oder die Änderung des Val auslösen, obwohl es mir lieber ist, dass es ein Klickereignis ist.

Die mitgelieferte Dokumentation here zeigt, dass es kein Klickereignis gibt, jedoch ein Änderungsereignis. 

Ich habe auch das Änderungsereignis versucht (wie unten gezeigt), aber das Ereignis wird nicht ausgelöst.

 <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 meiner .ts-Datei

import {MatButtonToggleModule} aus '@ angle/material/button-toggle';

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

Wie löse ich die obige Änderungsfunktion aus? 

2

es sollte sein :

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>

komponente:

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

überprüfe diese working stackblitz

3
Fateme Fazli

Tangential verwandt, für jeden, der Fastclick verwendet, um die 300ms Verzögerung bei mobilen Webviews zu entfernen, Folgendes musste ich tun, um das change-Ereignis von <mat-button-toggle-group> auszulösen.

Erläuterung: Es scheint, dass in einem Desktop-Browser der ToggleIt-Handler des Mat-Button-Toggle (der zum change-Dispatcher der Gruppe führt) das Ereignis click der Schaltfläche abhört, in einer mobilen Webansicht jedoch das ToggleIt-Handler das Ereignis touchend der Schaltfläche direkt. Bestimmte mobile Webviews verfügen über einen integrierten Listener für alle touchend -Ereignisse, der 300ms wartet, um zu sehen, ob der mobile Benutzer ein Einzel- oder Doppelklick ausführt, und löst dann das entsprechende Ereignis click oder dblclick aus. Fastclick stört dies, indem er auch auf touchend -Ereignisse hört, die er abfängt, so dass der langsame webview touchendHandler nie aufgerufen wird, und löst ein unmittelbares Einzelklickereignis aus. In unserem Fall ruft das abgefangene touchend-Ereignis jedoch auch nicht toggleIt auf. Also wir schalten Sie das Abfangen aus, was die Zeit, die to ToggleIt benötigt, nicht verletzt wird (unsere UX), da die Webansicht nur die clickHandlers verzögert, nicht die direkten touchendHandler des mat-button-toggle.

in main.ts

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

in 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

<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

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