1

这在之前的几篇文章中都被问到过。我能够让它以某种方式工作，但我无法让它以这种方式工作。

参考这个

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

私人服务器.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);
}
4

2 回答 2

0

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

普朗克

于 2016-05-14T22:35:19.000 回答
0

为了在您还添加到构造函数时不会出错el:ElementRef，您需要导入ElementRef到文件中

import {Component, ElementRef} from 'angular2/core';
于 2016-02-22T09:58:42.760 回答