修改

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>

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

Answer 1

要在构造函数中添加el:ElementRef时未收到错误，您需要将ElementRef导入文件

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

Answer 2

如果这对任何人都有帮助，那么这是Angular2 + Material Design Lite的Android.dot.com模板实现的完整工作者。

Plunker

使用Angular 2和Material design lite

修改

2 个答案: