使用墊滑塊聚焦和模糊

Question

我有這個 html 代碼

<mat-slider #slider class="wba-toolbar-slider pl-2"
       (focus)="sliderSelectOnOff(true)" (blur)="sliderSelectOnOff(false)">
</mat-slider>

以及相關的 component.ts 文件中的這段代碼

sliderSelectOnOff(value) {
    console.log('sliderSelectOnOff', value);
    this.sliderSelect.emit(value);
}

我希望當我選擇和取消選擇滑塊時，我會在控制台日志中看到輸出，但我沒有。 有什么想法我在做什么或假設錯了嗎？

Answer 1

MatSlider在其API中沒有focus()或blur()動作輸出。 這些是方法，這意味着您可以調用它們來模糊或聚焦宿主元素，但它們不會創建輸出。

我認為您想要的是change() ，它是 MatSlider 上的動作輸出。

<mat-slider #slider class="wba-toolbar-slider pl-2"
       [(ngModel)]="value"
       (change)="sliderSelectOnOff()">
</mat-slider>

在你的組件中：

sliderSelectOnOff() {
    console.log('sliderSelectOnOff', value);
}

Answer 2

原來這是我自己的錯誤。 （我在錯誤的文件中工作）。

奇怪的是，盡管在 Angular 的 MatSlider API官方文檔中缺乏參考，但(blur)和(focus)在 Angular 11.0.9 中的表現與預期一樣