Использование углового 2 с конструкцией материала lite

Question

Это было задано в нескольких предыдущих сообщениях. Я могу заставить его работать определенным образом, но я не могу заставить его работать таким образом.

Ссылаясь на this

MaterialDesignLiteUpgradeElement.ts

import {Directive, ElementRef} from 'angular2/core'; 
declare var componentHandler; 

@Directive({ 
    selector: '[mdl]' 
}) 
export class MDL { 

    constructor() { 
     componentHandler.upgradeAllRegistered(); 
    } 
} 

PrivateServersComponent.ts

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

declare var componentHandler:any; 
@Component({ 
    selector: 'private-server', 
    templateUrl: 'app/components/private-server/privateServer.html', 
    directives: [MDL], 
    styleUrls: ['app/components/private-server/styles/private-server.css'] 
}) 
export class PrivateServersComponent{ 
constructor(private _privateServerService: PrivateServerService, el:ElementRef) { 

     this.element =el; 
    } 
} 

privateServer.html

<div mdl style="margin: auto; top:40px; position:relative; display:inline-block;"> 
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp" id="list_private_servers"> 
    <thead align=""> 
    <tr> 
     <th> Private Server IP</th> 
     <th> Host ID</th> 
     <th> Number of Video workers</th> 
     <th> Number of PDF workers</th> 
     <th> Switch </th> 
    </tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="#privateServer of privateServers"> <!-- some logic based on my service 
      <td> 
       1 
      </td> 
      <td> 
       2 
      </td> 
      <td> 
       3 
      </td> 
      <td> 
        4 
      </td> 
      <td> 
       <div id="switch_public" class="material-icons" (click)="privateToPublic(privateServer.server_ip)">undo</div> 
       <div class="mdl-tooltip mdl-tooltip--large" for="switch_public"> 
        <strong>Switch to Public Server</strong> 
       </div> 
      </td> 
     </tr> 
     <tr *ngIf="newEntry == 1"> 
      <td> 
       <div class="mdl-textfield mdl-js-textfield millvi-half-width"> 
        <input class="mdl-textfield__input" type="text" id="private_sever_ip" [(ngModel)]="newServer.ip"> 
        <label class="mdl-textfield__label" for="private_sever_ip">IP</label> 
       </div> 
      </td> 
      <td> 
       <div class="mdl-textfield mdl-js-textfield millvi-half-width"> 
        <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="host_id" [(ngModel)]="newServer.id_host"> 
        <label class="mdl-textfield__label" for=host_id>Host ID</label> 
        <span class="mdl-textfield__error">Not a valid host id!</span> 
       </div> 
      </td> 
      <td> 
       <div class="mdl-textfield mdl-js-textfield millvi-half-width"> 
        <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="video_workers" [(ngModel)]="newServer.video_workers"> 
        <label class="mdl-textfield__label" for="video_workers">Video Workers</label> 
        <span class="mdl-textfield__error">Not Valid number of workers!</span> 
       </div> 
      </td> 
      <td> 
       <div class="mdl-textfield mdl-js-textfield millvi-half-width"> 
        <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="pdf_workers" [(ngModel)]="newServer.pdf_workers"> 
        <label class="mdl-textfield__label" for="pdf_workers">PDF Workers</label> 
        <span class="mdl-textfield__error">Not Valid number of workers!</span> 
       </div> 
      </td> 

     </tr> 

    </tbody> 


</table> 

</div> 

Пользовательский интерфейс не отображается правильно. И я получаю следующее сообщение об ошибке

EXCEPTION: Cannot resolve all parameters for 'PrivateServersComponent'(PrivateServerService, undefined). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'PrivateServersComponent' is decorated with Injectable. 

Это правильно работает без directives:[mdl] и добавления componentHandler.upgradeAllRegistered()

EDIT

Я внес изменения в конструктор в качестве следующего

constructor(private _privateServerService: PrivateServerService) { 
    } 

и ему работает отлично.

Однако, я получаю следующие ошибки:

EXCEPTION: TypeError: l is null 
BrowserDomAdapter</BrowserDomAdapter.prototype.logError() angular2.dev.js:22911 
BrowserDomAdapter</BrowserDomAdapter.prototype.logGroup() angular2.dev.js:22922 
ExceptionHandler</ExceptionHandler.prototype.call() angular2.dev.js:1182 
PlatformRef_</PlatformRef_.prototype._initApp/</<() angular2.dev.js:12562 
NgZone</NgZone.prototype._notifyOnError() angular2.dev.js:13485 
NgZone</NgZone.prototype._createInnerZone/errorHandling<.onError() angular2.dev.js:13389 
u</e.prototype.run() angular2-polyfills.min.js:1 
NgZone</NgZone.prototype._createInnerZone/<.$run/<() angular2.dev.js:13408 
u</e.prototype.bind/<() 

Он отлично работает на начальной загрузке, но при переключении вкладок обратно к этому, это дает мне эту ошибку.

Я также попытался изменить MaterialDesignLiteUpgradeElement как следующий, но он не работает.

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

Answer 1

Чтобы не получить ошибку, когда вы добавить el:ElementRef конструктору, вам необходимо импортировать ElementRef в файл

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

Answer 2

Вот полный рабочий plunker реализации Angular2 + Material Design Lite портретируемого, Шаблон Android.dot.com, если это поможет кому угодно.

Plunker