mdc-component 基础和适配器类的实际使用

Question

我正在尝试使用 .angular4 项目创建mdc-componentsangular-cli。所以我使用 npm 命令安装了 moduled

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

然后为文件中的同一个 mdc 组件导入 sassstyles.scss文件

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

这在 UI 上呈现了一个漂亮的材质滑块组件，并且工作正常。

监听更改事件

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

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

但是我对每个组件的基础和适配器类感到困惑。

从文档中，我得到了

基础类是与dom元素进行交互，在交互的名称上我可以

1）监听事件

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

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

我对此有一些疑问

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

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

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

Answer 1

大多数情况下，这些问题都是相关的，我会一次回答一个：

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

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

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

我们正在改变我们的方法。/framework-examples目前，我们在存储库的根目录中有一些大约 6 个月前的示例。我们还有几个开放的拉取请求，我们将链接到我们认为朝着正确方向发展的外部项目。目前我们正在审查一项用于 Angular 的项和一项用于 React 的项。这是我们未来将采取的方法。

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

是的。这是我们正在评估的 Angular 项目的示例

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

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