這在以前的文章中很少被提到過。我能夠以某種方式使其工作，但我無法以這種方式工作。使用Angular 2與材料設計Lite

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

UI未正確呈現。我收到以下錯誤消息

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

編輯

我修改了構造函數如下

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

來源

2016-02-22 user3288346

你省略'出口類PrivateServersComponent { }'構造函數？它有兩個參數的構造函數嗎？如果是這樣，請將代碼添加到您的問題。 –

我添加了構造函數並將其更改爲解決我提到的問題，但是我收到了一些其他錯誤。請檢查編輯。 – user3288346

爲了不出現錯誤時，你還可以添加el:ElementRef的構造函數，你需要導入ElementRef到文件

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

來源

2016-02-22 09:58:42

我刪除了那部分，因爲我不需要它。它現在運行良好，但請檢查編輯部分。 – user3288346

我想這需要一個完整的回購案件的Plunker。 –

這裏的Angular2 +材料設計精簡版的實現的一個完整的工作plunker Android.dot.com模板，如果這有助於任何人。

Plunker

來源

2016-05-14 22:35:19 Helzgate

使用Angular 2與材料設計Lite

編輯

回答

相關問題