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

Question

我正在尝试mdc-components使用 Angular-cli 创建的 Angular4 项目。所以我使用 npm 命令安装了 moduled

npm install material-components-web

已安装

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

然后创建一个包含 slider 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 上呈现了一个漂亮的 Material slider 组件，并且运行良好。

监听更改事件

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

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

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

从文档中，我得到

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

1)监听事件

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

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

我对此有一些疑问

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

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

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

Answer 1

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

To use a component, every time, I have to use foundation class? with custom adapter implementation?

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

Any scenario or example that shows the use of foundation and adapter except for the checkbox example of angular2?

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

Is foundation class used if I have to create my own angular component?

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

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

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