mdc组件基础和适配器类的实际使用

Question

我正在使用使用mdc-部件创建的angular4项目来尝试angular-cli。因此，我使用npm命令进行模块化安装。

npm install material-components-web

此安装

"material-components-web": "^0.22.0"

然后创建一个包含滑块的HTML标记的组件。

<div #slider class="mdc-slider" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-label="Select Value">
    <div class="mdc-slider__track-container">
        <div class="mdc-slider__track"></div>
    </div>
    <div class="mdc-slider__thumb-container">
        <svg class="mdc-slider__thumb" width="21" height="21">
            <circle cx="10.5" cy="10.5" r="7.875"></circle>
        </svg>
        <div class="mdc-slider__focus-ring"></div>
    </div>
</div>

在ts端，使用ViewChild获取元素

 @ViewChild('slider') elSlider: ElementRef;

并使用MDCSlider类包装此元素。

let mdcSlider = new MDCSlider(this.elSlider.nativeElement);

然后在styles.scss文件中导入相同mdc组件的sass文件。

@import '~@material/slider/mdc-slider';

这在UI上呈现了一个漂亮的材料滑块组件，并且它工作得很好。

收听更改事件

mdcSlider.listen('MDCSlider:change', () => console.log("Value changed to ",mdcSlider.value));

并在浏览器控制台上记录滑块的当前值。

但我对每个组件的基金会、和适配器类感到困惑。

在纪录片里，我找到了

foundation类是与dom元素交互，在交互的名称上我可以

1)倾听事件

2)获取/设置组件的当前值

并且我可以将我的自定义适配器传递给基类。

我对这个有一些疑问

1)要使用组件，每次都要使用基础类？使用自定义适配器实现？

2)除了angular2复选框示例之外，任何显示基础和适配器使用的场景或示例？

( 3)如果必须创建自己的角分量，是否使用基类？

Answer 1

在大多数情况下，这些问题是相关的，我将逐一回答：

要使用组件，每次我都要使用基础类？使用自定义适配器实现？

是。当前，JavaScript MDC组件有一个生命周期，每次初始化组件时，都会向基础传递默认适配器。您可以保留对它的引用，或者使用attachTo()函数，如果您只希望所有这些都自动发生的话。所有这一切都是说，即使您所做的只是初始化一个新组件，您也在使用适配器/基础模式，因为它是组件生命周期的一部分。唯一需要自定义适配器的情况是，如果您所处的上下文在与DOM交互方面偏离了惯用的JavaScript，例如: Vuejs、React等等.

除了angular2的复选框示例之外，任何显示基础和适配器的使用的场景或示例？

我们正在改变我们的做法。我们目前在存储库的根中有几个在/framework-examples中使用了大约6个月的示例。我们也有几个开放的拉请求，我们连接到外部项目，我们认为是朝着正确的方向。目前，我们正在审查一个角度和一个反应。这就是我们将来要采取的方法。

如果我必须创建自己的角组件，是否使用了基类？

是。这里作为我们正在评估的角度项目的例子。

在本例中，您可以看到这里确实使用了基金会，以及来自mdc.textfield.adapter.ts的自定义适配器对象

注意，他定义了private foundation: {...} = new MDCTextfieldFoundation(this.adapter)，然后在ngAfterContentInit()函数中调用init()方法。这正是我们建议您在一个角度应用程序中使用MDC的方式。