mdc组件的基础和适配器类的实际使用 [英] actual use of foundation and adapter class of mdc-components

问题描述

我正在尝试将 mdc组件与使用 angular-cli .所以我使用npm命令安装了模块

I am trying mdc-components with angular4 project created using angular-cli. So I installed moduled using npm command

npm install material-components-web

已安装

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

然后创建了一个包含滑块HTML标记的组件

Then created a component that contains HTML markup of slider

<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文件

and then imported sass file for the same mdc component in styles.scss file

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

这在UI上呈现了一个漂亮的材质滑块组件，并且效果很好.

this rendered a beautiful material slider component on UI and it works fine.

要收听更改事件

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

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

and that logs the current value of slider on browser console.

但是我对每个组件的 foundation 和 adapter 类感到困惑.

But I am confused with the foundation and adapter classes of each component.

从文献中，我得到了

基础课程是要与dom元素进行交互，并且以交互的名义进行操作

foundation class is to interact with the dom element and on the name of interaction I can

1)监听事件

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

2) get/set the current value of component

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

and I can pass my custom adapter to the foundation class.

我对此有疑问

1)要使用组件，每次都要使用基础类吗?与自定义适配器实现?

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

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

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

3)如果必须创建自己的角度分量，是否使用基础类?

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

推荐答案

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

For the most part, these questions are related, I'll answer one at a time:

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

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

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

Yes. Currently, there is a life cycle for JavaScript MDC Web components wherein a default adapter is passed to the foundation every time a component is initialized. You can either retain a reference to it, or utilize the attachTo() function if you just want it all to happen automatically. All of this is to say that even if all you are doing is initializing a new component, you are using the adapter/foundation pattern, as it is part of the life cycle of a component. The only time you should need to customize the adapter is if you are in a context that deviates from idiomatic JavaScript with regards to interacting with the DOM, i.e.: Vuejs, React, etc...

除了angular2的复选框示例之外，是否有任何显示基础和适配器使用情况的方案或示例?

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

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

We are in the middle of shifting our approach here. We currently have a few examples that are about 6 months old in /framework-examples in the root of the repository. We also have a couple open pull requests where we link out to external projects that we think are headed in the right direction. Currently we are reviewing one for Angular and one for React. This is the approach we'll take in the future.

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

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

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

In this example you can see that the Foundation is indeed used here, as well as a custom adapter object from mdc.textfield.adapter.ts

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

Notice he defines private foundation: {...} = new MDCTextfieldFoundation(this.adapter), then in the ngAfterContentInit() function, he calls the foundations init() method. This is exactly how we would suggest you use MDC Web in an Angular app.

这篇关于mdc组件的基础和适配器类的实际使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！