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

2 回答

• 0

  它应该是 ：

  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

  回复于 2024-04-28T10:37:09+08:00
• 1

  切向相关，对于使用 fastclick 删除移动网络浏览300毫秒延迟的人来说，这是我需要做的才能让 <mat-button-toggle-group> 的 change 事件触发 .

  说明：似乎在桌面浏览器中，mat-button-toggle 's toggleIt handler (leading to the group' s change dispatcher正在侦听按钮的 click 事件，但在移动webview中，toggleIt处理程序正在直接侦听按钮的 touchend 事件 . 某些移动Web视图在所有 touchend 事件上都有内置侦听器，等待300毫秒以查看移动用户是单击还是双击，然后调度正确的 click 或 dblclick 事件 . Fastclick通过监听它拦截的 touchend 事件来干扰它，从而永远不会调用慢速webview touchendHandler，并自行调度一次单击事件 . 但是在我们的例子中，截获的 touchend 事件也不会调用toggleIt . 所以我们 turn off the interception ，赢得了'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'直接的touchendHandler .

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

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

  回复于 2024-04-28T10:37:09+08:00