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

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

2 に答える 2

0

コンストラクターにも追加するときにエラーが発生しないようにするには、ファイルel:ElementRefにインポートする必要がありますElementRef

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

これは、Angular2 + Material Design Lite の Android.dot.com テンプレートの実装の完全に機能するプランカーです。

プランカー

于 2016-05-14T22:35:19.000 に答える