mat-slider - Angular 材料实验 - _getHostElement 错误。 如何解决？

Question

我最近升级到 Angular 12 并安装了 Angular Material Experimental 以试用新的 mat-slider。 我实际上想要一个范围 slider，它在当前 angular 材料 package 中不可用，我更愿意留在 Angular 材料生态系统中。

从以下讨论中可以看出为什么我决定在材料实验https://github.com/angular/components/issues/1331中尝试新的 mat-slider

代码：

模块：

import { MatSliderModule } from '@angular/material-experimental/mdc-slider'; 与适当的进口等

HTML： <mat-slider discrete markers thumbLabel [min]="0" [max]="100" [step]="5" values="[10,20]"></mat-slider>

GUI：我得到以下视觉效果 - 只是 slider img的后栏

错误： 控制台错误：

main.js:1 ERROR TypeError: Cannot read property '_getHostElement' of undefined
    at me.value (main.js:1)
    at Object.Lt.setThumbStyleProperty (main.js:1)
    at main.js:1
    at main.js:1
    at ae.<computed> (polyfills.js:1)
    at X.invokeTask (polyfills.js:1)
    at Object.onInvokeTask (main.js:1)
    at X.invokeTask (polyfills.js:1)
    at X.runTask (polyfills.js:1)
    at X.invokeTask (polyfills.js:1)

正常 Angular 材料垫滑块不是开始工作的问题。

有什么明显的东西让我缺少_getHostElement错误吗？ 也许要导入另一个模块？ 我似乎无法在实验中找到与 Mat-Slider 的此错误相关的任何内容。

Answer 1

我可以确认使用最基本的实验垫滑块我也看到了同样的错误。 我成功地使用了其他实验控件，只是 slider 拒绝正确渲染。 这种情况已经有一段时间了，并不是一个新问题。

Answer 2

我遇到了同样的问题。 显然，自从您提出这个问题以来，他们已经更新了代码，因为他们现在在控制台中给您一个提示：

   Valid configurations are as follows:
    <mat-slider>
      <input matSliderStartThumb>
      <input matSliderEndThumb>
    </mat-slider>

Answer 3

您可能应该使用双范围 slider CSS 定制，因为 Angular 材料有时会出现问题，试试这个：

HTML

<div class="range_container">
    <div class="sliders_control">
        <input id="fromSlider" type="range" value="10" min="0" max="100"/>
        <input id="toSlider" type="range" value="40" min="0" max="100"/>
    </div>
    <div class="form_control">
        <div class="form_control_container">
            <div class="form_control_container__time">Min</div>
            <input class="form_control_container__time__input" type="number" id="fromInput" value="10" min="0" max="100"/>
        </div>
        <div class="form_control_container">
            <div class="form_control_container__time">Max</div>
            <input class="form_control_container__time__input" type="number" id="toInput" value="40" min="0" max="100"/>
        </div>
    </div>
</div>

CSS：

    .range_container {
  display: flex;
  flex-direction: column;
  width: 80%;
  margin: 35% auto;
}

.sliders_control {
  position: relative;
  min-height: 50px;
}

.form_control {
  position: relative;
  display: flex;
  justify-content: space-between;
  font-size: 24px;
  color: #635a5a;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 24px;
  height: 24px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #C6C6C6;
  cursor: pointer;
}

input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  width: 24px;
  height: 24px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #C6C6C6;
  cursor: pointer;  
}

input[type=range]::-webkit-slider-thumb:hover {
  background: #f7f7f7;
}

input[type=range]::-webkit-slider-thumb:active {
  box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
  -webkit-box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
}

input[type="number"] {
  color: #8a8383;
  width: 50px;
  height: 30px;
  font-size: 20px;
  border: none;
}


input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  
   opacity: 1;
}

input[type="range"] {
  -webkit-appearance: none; 
  appearance: none;
  height: 2px;
  width: 100%;
  position: absolute;
  background-color: #C6C6C6;
  pointer-events: none;
}

#fromSlider {
  height: 0;
  z-index: 1;
}