角2与材料设计的结合

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>

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实现Android.dot.com模板的完整工作柱塞，如果这对任何人都有帮助的话。

柱塞