web-dev-qa-db-ja.com

Material Design LiteとAngular2の統合

私はng2にメーターデザイン（ http://www.getmdl.io/ ）を統合する際に小さな問題を抱えています。私を助けてくれませんか？

  1. http://www.getmdl.io/started/index.html#tab1 、設計の統合について説明します
  2. http://www.getmdl.io/components/index.html#textfields-section 、これはフローティングラベル付きのテキストフィールドの例であり、今では Plunkr を持っています。統合しましたが、DID NOT WORK見てください。index.htmlでわかるように、CSSファイルとJSファイルの包含があります http：/ /www.getmdl.io/started/index.html#tab1

<!-- GetMDL scripts --> <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.Indigo-pink.min.css"> <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <!-- GetMDL scripts -->そしてapp.component.tsファイルで：

import {Component, ViewEncapsulation} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: `<form action="#">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="sample3">
    <label class="mdl-textfield__label" for="sample3">Text...</label>
  </div>
</form>`,
encapsulation:ViewEncapsulation.None,
})
typescriptintegrationangular
34
RONE

私は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 、この人たちは非常にクールな素材を作っています、これも参照できます

8
RONE

おかげで、魅力的なように機能し、これを完全なソリューションにまとめることができ、私にとってはうまくいきます（ベータ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>
38
Rob

問題は、Material Design Liteは、Angular2によって生成されるような動的ページで使用するように設計されていないことです。つまり、MDL _componentHandler.upgradeElement_関数を使用することで可能になるはずです。

詳細については、こちらをご覧ください： http://www.getmdl.io/started/#dynamic

Angular componentsでElementRefを取得し、コンポーネントライフサイクルフックのいずれか、おそらくngAfterViewInit()

9
Zyzle

私はあなたと同じテンプレートを使用しているため、同じ問題に直面していました。

componentHandler.upgradeAllRegistered()を試してください。あなたの場合はうまくいきます。

ヘッダーを小さなコンポーネントに分割しようとすると、別の問題が発生します。

1
Vítor Teixeira

ここで、公式の Angular 2 ライブラリのマテリアルデザインは現在alpha.2であることに言及する価値があると思ったので、新しいプロジェクトを開始することを検討してください。

0
Yoav Aharoni

ElementRefとOnInitをangular2/coreからインポートして、コンストラクターに挿入するだけです：

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

}

次に、ngOnInitメソッドを使用し、使用した動的に追加されたタグでcomponentHandler.upgradeElementを使用します。

0
Bandito11

Ng2-webpack デモプロジェクト には、Vanilla MDLを使用するシンプルなng2 CRUDアプリケーションが含まれています

手順：

  • npm install --save material-design-lite
  • src/vendor.jsのライブラリ全体をインポートします
  • または単に目的のコンポーネント
  • src/style/app.scssで、目的のコンポーネントをインポートします。

問題点：

問題-MDL拡張DOM効果が適用されない：

  • 状態の変化中に一貫して
  • ルート変更中

溶液：

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

詳細については、 Material Design Liteの操作 を参照してください。

0
Charles Fulnecky