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

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

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

从文件中，我得到了

基础类是与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的方式。

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

1 个答案: