7

我正在尝试使用 mdc-components创建的 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);

然后为文件中的同一 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) 如果我必须创建自己的角度组件，是否使用基础类？

4

1 回答 1

4

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

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

是的。目前，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()函数中，他调用了基础init()方法。这正是我们建议您在 Angular 应用程序中使用 MDC Web 的方式。

于 2017-11-09T02:33:50.003 回答