Тангенциально связанный, для любого, кто использует fastclick для устранения задержки 300 мс на мобильных веб-просмотрах, вот что мне нужно было сделать, чтобы вызвать событие <mat-button-toggle-group> s change.
Объяснение: Похоже, что в настольном браузере обработчик toggleIt mat-button-toggle (ведущий к диспетчеру change группы) прослушивает событие кнопки click, но в мобильном веб-представлении обработчик toggleIt прослушивает событие кнопки touchend напрямую. Некоторые мобильные веб-просмотры имеют встроенный прослушиватель для всех событий touchend, который ждет 300 мс, чтобы увидеть, является ли мобильный пользователь одиночным или двойным щелчком, а затем отправляет соответствующее событие click или dblclick. Fastclick вмешивается в это, также прослушивая touchend события, которые он перехватывает, так что медленное веб-представление touchendHandler никогда не вызывается, и отправляет непосредственное событие одним щелчком. Однако в нашем случае перехваченное событие touchend также не вызовет toggleIt. Таким образом, мы отключаем перехват , что не повредит времени, необходимому для вызова toggleIt (нашего UX), поскольку веб-просмотр задерживает только clickHandlers, а не прямое touchendHandler mat-button-toggle.
в 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;
}