typescript - for - Integrando Material Design Lite con Angular2

get mdl angular

Question

Tengo un pequeño problema al integrar un diseño de material ( http://www.getmdl.io/ ) en ng2. ¿Pueden ayudarme? Lo pondré en puntos de lo que he hecho.

1. http://www.getmdl.io/started/index.html#tab1 , explica la integración del diseño
2. http://www.getmdl.io/components/index.html#textfields-section , este es un ejemplo de campo de texto con etiqueta flotante y ahora tengo el Plunkr , que Plunkr , pero NO Plunkr , ¿ Plunkr echar un vistazo? Como puede ver en index.html, tengo la inclusión de archivos css y js como lo sugiere 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 --> Y en el archivo 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,
})

Answer 1

El proyecto de demostración ng2-webpack incluye una sencilla aplicación ng2 CRUD que usa MDL de vainilla

Pasos:

• npm install --save material-design-lite
• importar toda la biblioteca en src / vendor.js
• o solo los componentes deseados
• en src / style / app.scss, importe los componentes deseados:

Cuestiones:

Problema: los efectos DOM aumentados de MDL no se aplican:

• consistentemente durante los cambios de estado
• durante los cambios de ruta

Solución:

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

vea Trabajando con Material Design Lite para más detalles.

Answer 2

El problema es que Material Design Lite no está diseñado para usarse con páginas dinámicas como las generadas por Angular2. Dicho esto, debería ser posible utilizando la función MDL componentHandler.upgradeElement .

Puede encontrar más información sobre esto aquí: http://www.getmdl.io/started/#dynamic

Sugeriría obtener un ElementRef en sus componentes angulares y luego llamar a esta función en el elemento ref en uno de los componentes del ciclo de vida de sus componentes, probablemente ngAfterViewInit()

Answer 3

Estaba enfrentando el mismo problema (ya que estoy usando la misma plantilla que tú).

Simplemente intente componentHandler.upgradeAllRegistered() funcionará bien en su caso.

Se produce un problema diferente cuando intenta dividir el encabezado en componentes pequeños.

Answer 4

Gracias chicos, funciona de maravilla, para concluir esto, una solución completa, que funciona bien para mí (probado con beta6). Sin demasiado código repetitivo. Lo único que no pude trabajar fueron elementos realmente agregados dinámicamente a través de *ngFor dependiendo de una variable componente. Ver dynamic elements en la plantilla. Quizás uno de ustedes sepa cómo sortear eso.

Vea un plunkr funcione (la vista previa debe tener al menos plunkr ancho para ver el encabezado)

Instalar MDL

npm i material-design-lite --save

Haz referencia en tu 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">

Crear MaterialDesignLiteUpgradeElement.ts

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

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

Luego, en su componente, importe y registre

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

Y en su plantilla agregue mdl al componente raíz

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

Answer 5

Puedo obtener la solución del canal angualrjs, y es una solución súper genial, de origen tenemos que usar componentHandler.upgradeElement(this.elementRef.nativeElement);

// Esta es la forma de hacer

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

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

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

y use la Directiva sobre las etiquetas HTML para usarla.

Funciona,

NOTA: https://github.com/justindujardin/ng2-material , estos muchachos han hecho material súper genial, también pueden referir esto

Answer 6

Solo pensé que vale la pena mencionar aquí que la biblioteca oficial de Material Design for Angular 2 ahora está en alpha.2, por lo que podría considerar comenzar nuevos proyectos con ella.

Answer 7

simplemente importe ElementRef y OnInit desde angular2/core e angular2/core a un constructor de la siguiente manera:

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

}

luego use un método ngOnInit y use el componentHandler.upgradeElement en cualquier etiqueta agregada dinámicamente que haya utilizado.