这在以前的文章中很少被提到过。我能够以某种方式使其工作，但我无法以这种方式工作。使用Angular 2与材料设计Lite

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

来源

2016-02-22 user3288346

你省略'出口类PrivateServersComponent { }'构造函数？它有两个参数的构造函数吗？如果是这样，请将代码添加到您的问题。 –

我添加了构造函数并将其更改为解决我提到的问题，但是我收到了一些其他错误。请检查编辑。 – user3288346

为了不出现错误时，你还可以添加el:ElementRef的构造函数，你需要导入ElementRef到文件

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

来源

2016-02-22 09:58:42

我删除了那部分，因为我不需要它。它现在运行良好，但请检查编辑部分。 – user3288346

我想这需要一个完整的回购案件的Plunker。 –

这里的Angular2 +材料设计精简版的实现的一个完整的工作plunker Android.dot.com模板，如果这有助于任何人。

Plunker

来源

2016-05-14 22:35:19 Helzgate

使用Angular 2与材料设计Lite

编辑

回答

相关问题