mdc-components的foundation和adapter类的实际使用

Question

我正在尝试 mdc-components 使用 angular-cli 创建的 angular4 项目。所以我使用 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 和 adapter 类感到困惑。

从文档中，我得到了

基础类是和dom元素交互的，名字就可以交互了

1) 监听事件

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

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

我对此有一些疑问

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

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

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

Answer 1

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

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

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

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

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

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

是的。 Here as example from the Angular project we are evaluating

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

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