реальное использование фундамента и адаптера класса mdc-компонентов

Я пытаюсь 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);

а затем импортировал файл sass для того же компонента mdc в styles.scss файле

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

это отрендерило красивый компонент слайдера материала в пользовательском интерфейсе, и он отлично работает.

Чтобы прослушать событие изменения

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

и это регистрирует текущее значение ползунка в консоли браузера.

Но меня смущают классы основы и адаптера каждого компонента.

Из документа я получил

фундаментальный класс предназначен для взаимодействия с элементом dom, и по имени взаимодействия я могу

1) слушать события

2) получить / установить текущее значение компонента

и я могу передать свой собственный адаптер базовому классу.

У меня есть вопросы по этому поводу

1) Чтобы использовать компонент каждый раз, мне нужно использовать базовый класс? с кастомной реализацией адаптера?

2) Любой сценарий или пример, показывающий использование фундамента и адаптера, за исключением примера флажка angular2?

3) Используется ли базовый класс, если мне нужно создать собственный угловой компонент?


angular mdc-components
person Sunil Garg    schedule 24.10.2017    source источник
comment
все вопросы связаны с конкретной проблемой   -  person Sunil Garg    schedule 26.10.2017
comment
Основной участник, пожалуйста, позвольте мне отложить этот вопрос, чтобы я мог на него ответить.   -  person WrksOnMyMachine    schedule 26.10.2017
comment
@WrksOnMyMachine этот вопрос снят, вы можете ответить сейчас.   -  person The Blue Shirt Developer    schedule 01.11.2017
comment
Есть ли причина, по которой этот вопрос заслуживает повторного обсуждения?   -  person Edric    schedule 18.03.2020

Ответы (1)


arrow_upward
3
arrow_downward

По большей части эти вопросы связаны между собой, я отвечу по одному:

Чтобы использовать компонент каждый раз, мне нужно использовать базовый класс? с кастомной реализацией адаптера?

да. В настоящее время существует жизненный цикл веб-компонентов JavaScript MDC, в котором адаптер по умолчанию передается в основу при каждой инициализации компонента. Вы можете либо сохранить ссылку на него, либо использовать функцию attachTo(), если вы просто хотите, чтобы все это происходило автоматически. Все это означает, что даже если все, что вы делаете, это инициализируете новый компонент, вы используете шаблон адаптер / фундамент, поскольку он является частью жизненного цикла компонента. Единственный раз, когда вам нужно настроить адаптер, - это если вы находитесь в контексте, который отличается от идиоматического JavaScript в отношении взаимодействия с DOM, то есть: Vuejs, React и т. Д.

Любой сценарий или пример, показывающий использование фундамента и адаптера, за исключением примера флажка angular2?

Мы находимся в середине изменения нашего подхода здесь. В настоящее время у нас есть несколько примеров, которым около 6 месяцев в /framework-examples в корне репозитория. У нас также есть пара открытых запросов на вытягивание, в которых мы связываемся с внешними проектами, которые, по нашему мнению, движутся в правильном направлении. В настоящее время мы рассматриваем один для Angular и один для React. Это подход, который мы будем использовать в будущем.

Используется ли базовый класс, если мне нужно создать собственный угловой компонент?

да. Вот как пример из проекта Angular, который мы оцениваем

В этом примере вы можете видеть, что здесь действительно используется Foundation, а также пользовательский объект адаптера из mdc.textfield.adapter.ts

Обратите внимание, что он определяет private foundation: {...} = new MDCTextfieldFoundation(this.adapter), затем в функции ngAfterContentInit() он вызывает метод Foundations init(). Именно так мы предлагаем вам использовать MDC Web в приложении Angular.

person WrksOnMyMachine    schedule 09.11.2017
comment
WrksOnMyMachine, не могли бы вы взглянуть на мой вопрос здесь: stackoverflow.com/questions/64892909/ - person Leo; 18.11.2020