Интеграция Material Design Lite с Angular2

Ответ 1

Я могу получить решение из канала angualrjs, и это суперхолодное решение, источник, который мы должны использовать componentHandler.upgradeElement(this.elementRef.nativeElement);

//Это способ сделать

@Directive({
  selector: '[mdlUpgrade]'
})
class MdlUpgradeDirective {
  @Input() mglUpgrade;

  constructor(el: ElementRef) {
    componentHandler.upgradeElement(el.nativeElement);
  }
}

@Component ({
  selector: 'login',
   ...
  directives: [MdlUpgradeDirective]
})

и использовать директиву для HTML-тегов, чтобы использовать его.

Он работает,

ПРИМЕЧАНИЕ: https://github.com/justindujardin/ng2-material, эти ребята сделали супер классный материал, могут также ссылаться на него.

Ответ 2

Спасибо, ребята, работает как шарм, чтобы завершить это полное решение, которое хорошо работает для меня (тестируется с бета6). Без слишком большого шаблона. Единственное, что мне не удалось найти, - это динамически добавленные элементы через *ngFor в зависимости от переменной компонента. См. dynamic elements в шаблоне. Возможно, один из вас, ребята, знает, как обойти это.

См. рабочий plunkr (предварительный просмотр должен быть не менее 1024px для просмотра заголовка)

Установить MDL

npm i material-design-lite --save

Ссылка на него в index.html

<script src="/node_modules/material-design-lite/material.min.js"></script>
<!-- from http://www.getmdl.io/customize/index.html -->
<link rel="stylesheet" href="/css/customized-material.min.css">

Создать MaterialDesignLiteUpgradeElement.ts

import {Directive, AfterViewInit} from 'angular2/core';
declare var componentHandler: any;

@Directive({
    selector: '[mdl]'
})    
export class MDL implements AfterViewInit {
    ngAfterViewInit() {
        componentHandler.upgradeAllRegistered();
    }
}

Затем в вашем компоненте импортируйте и зарегистрируйте его

import { Component } from '@angular/core';    
import { MDL } from '../../../directives/MaterialDesignLiteUpgradeElement';

@Component ({
  selector: 'my-component',
  directives: [ MDL ],
  templateUrl: 'app/components/Header/Header.html'
})
export class Header {
  public dynamicArray:number[] = [];

  add() {
    this.dynamicArray.push(Math.round(Math.random() * 10));
  }
}

И в вашем шаблоне добавьте mdl к корневому компоненту

<header mdl class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title">Home</span>
      <div class="mdl-layout-spacer"></div>

      <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"
              (click)="add()">
          <i class="material-icons">add</i>
      </button>
      <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn">
          <i class="material-icons">more_vert</i>
      </button>
      <ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="hdrbtn">
          <li class="mdl-menu__item">Static entry</li>

          <!-- semi dynamic, known when view is created -->
          <li class="mdl-menu__item" *ngFor="#nr of [1,2,3]">Semi Dynamic entry {{nr}}</li>

          <!-- dynamic, depends on service manipulated array -->
          <li class="mdl-menu__item" *ngFor="#nr of dynamicArray">Dynamic entry {{nr}}</li>
      </ul>
  </div>
</header>

Ответ 3

Проблема заключается в том, что Material Design Lite не предназначен для использования с динамическими страницами, такими как созданные Angular2. Тем не менее, это должно быть возможно с помощью функции MDL componentHandler.upgradeElement.

Дополнительную информацию об этом можно найти здесь: http://www.getmdl.io/started/#dynamic

Я бы предложил получить ElementRef в ваших Angular компонентах, а затем вызвать эту функцию на элементе ref в одном из ваших крючков жизненного цикла компонентов, возможно ngAfterViewInit()

Ответ 4

Я столкнулся с той же проблемой (поскольку я использую тот же шаблон, что и вы).

Просто попробуйте componentHandler.upgradeAllRegistered() он будет работать нормально в вашем случае.

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

Ответ 5

просто импортируйте ElementRef и OnInit из angular2/core и добавьте его в конструктор так:

constructor(@Inject(ElementRef) elementRef: ElementRef) {
    this.elementRef = elementRef;

}

затем используйте метод ngOnInit и используйте componentHandler.upgradeElement для любого добавленного вами динамически добавленного тега.

Ответ 6

Просто подумал, что стоит упомянуть здесь, что официальная Material Design для библиотеки Angular 2 теперь находится в alpha.2, поэтому вы можете подумать начинать с ним новые проекты.

Ответ 7

Проект ng2-webpack демонстрационный проект включает в себя простое приложение ng2 CRUD, которое использует vanilla MDL

Шаги:

• npm install --save material-design-lite
• импортировать всю библиотеку в src/vendor.js
• или только нужные компоненты
• в src/style/app.scss импортировать нужные компоненты:

Вопросы:

Проблема - эффекты DOM с расширенным увеличением не применяются:

• последовательно во время изменений состояния
• при изменении маршрута

Решение:

ngAfterViewInit() {
    // Ensure material-design-lite effects are applied
    componentHandler.upgradeDom();
}

см. Работа с Material Design Lite для более подробной информации.