將Angular 2與Material Design Lite一起使用

Question

以前的幾篇文章中都曾問過這個問題。 我可以使其以某種方式工作，但我無法以這種方式工作。

提到這個

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]正確運行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);
}

Answer 1

為了在向構造函數添加el:ElementRef時也不會出錯，您需要將ElementRef導入文件中

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

Answer 2

如果可以幫助任何人，這是Angular2 + Material Design Lite的Android.dot.com模板實現的完整插件。

Plunker