web-dev-qa-db-fra.com

Intégration de Material Design Lite avec Angular2

J'ai un petit problème dans l'intégration d'une conception métrique ( http://www.getmdl.io/ ) dans ng2 Pouvez-vous m'aider s'il vous plaît je vais le mettre en points ce que j'ai fait

  1. http://www.getmdl.io/started/index.html#tab1 , explique l'intégration de la conception
  2. http://www.getmdl.io/components/index.html#textfields-section , ceci est un exemple de champ de texte avec étiquette flottante et maintenant j'ai Plunkr , que j'ai intégré, mais DID NOT WORK pouvez-vous s'il vous plaît jeter un oeil Comme vous pouvez le voir dans l'index.html j'ai l'inclustion des fichiers css et js comme suggéré par 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 --> Et dans le fichier 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

Je suis en mesure d'obtenir la solution du canal angualrjs, et c'est une solution super cool, ofource nous devons utiliser componentHandler.upgradeElement(this.elementRef.nativeElement);

// C'est la façon de faire

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

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

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

et utiliser la directive sur les balises HTML pour l'utiliser.

Ça marche,

REMARQUE: https://github.com/justindujardin/ng2-material , ce gars a fait des trucs de matériel super cool, peut aussi se référer à cela

8
RONE

Merci les gars, ça fonctionne comme un charme, pour conclure cette solution complète, qui fonctionne bien pour moi (testé avec beta6). Sans trop de code passe-partout. La seule chose que je n'ai pas pu travailler, ce sont des éléments ajoutés de manière dynamique via *ngFor selon une variable de composant. Voir dynamic elements dans le modèle. Peut-être que l'un de vous sait comment contourner cela.

Voir un fonctionnement plunkr (l'aperçu doit être au moins 1024px large pour voir l'en-tête)

Installer MDL

npm i material-design-lite --save

Référencez-le dans votre 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">

Créer MaterialDesignLiteUpgradeElement.ts

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

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

Ensuite, importez votre composant et enregistrez-le

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

Et dans votre modèle, ajoutez mdl au composant racine

<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

Le problème est que Material Design Lite n'est pas conçu pour être utilisé avec des pages dynamiques comme celles générées par Angular2. Cela dit, cela devrait être possible en utilisant la fonction MDL componentHandler.upgradeElement.

Plus d'informations à ce sujet peuvent être trouvées ici: http://www.getmdl.io/started/#dynamic

Je suggère d'obtenir un ElementRef dans vos composants Angular, puis d'appeler cette fonction sur l'élément ref dans l'un de vos hooks de cycle de vie des composants, probablement ngAfterViewInit()

9
Zyzle

J'étais confronté au même problème (car j'utilise le même modèle que vous).

Essayez simplement componentHandler.upgradeAllRegistered() cela fonctionnera bien dans votre cas.

Un problème différent se produit lorsque vous essayez de diviser l'en-tête en petits composants.

1
Vítor Teixeira

J'ai pensé qu'il valait la peine de mentionner ici que la bibliothèque officielle Material Design for Angular 2 est maintenant en alpha.2, vous pouvez donc envisager de démarrer de nouveaux projets avec elle.

0
Yoav Aharoni

il suffit d'importer ElementRef et OnInit depuis angular2/core et l'injecter à un constructeur comme suit:

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

}

puis utilisez une méthode ngOnInit et utilisez le componentHandler.upgradeElement sur toute balise ajoutée dynamiquement que vous avez utilisée.

0
Bandito11

Le ng2-webpack Projet de démonstration comprend une application ng2 CRUD simple qui utilise Vanilla MDL

Pas:

  • npm install --save material-design-lite
  • importer la bibliothèque entière dans src/vendor.js
  • ou juste les composants désirés
  • dans src/style/app.scss, importez les composants souhaités:

Problèmes:

Problème - Les effets DOM augmentés MDL ne sont pas appliqués:

  • systématiquement lors des changements d'état
  • lors des changements d'itinéraire

Solution:

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

voir Travailler avec Material Design Lite pour plus de détails.

0
Charles Fulnecky