Angular2 * ngIf與子指令

我似乎無法讓我的指令工作，並懷疑是否是由於使用* ngif。Angular2 * ngIf與子指令

元器件HTML：

<div *ngIf="ticket" class="row"> 
    <div class="col-xs-12"> 
     <h4 appUsername>{{ticket.raisedBy.firstName}} {{ticket.raisedBy.surname}}</h4> 
    </div> 
</div>

指令

import { Directive, ElementRef, Input } from '@angular/core'; 

@Directive({ 
    selector: '[appUsername]' 
}) 

export class UsernameDirective {constructor(el: ElementRef) { 
    console.log('App Username directive init'); 
    el.nativeElement.style.color = 'red'; 
} 
}

的* ngIf需要在組件HTML作爲我是從上一個ngOnInit JSON服務收集數據。

代碼忽略簡潔：我加入指令「共享」模塊，其出口的指令。然後將該模塊導入到主應用程序模塊中。

這是已知問題還是我的代碼？

更新我現在得到了這個工作，但是我不得不將導入導入到包含組件的模塊中。我可以不將它導入到AppModule中，然後使用全局嗎？

來源

2017-03-03 Mad Eddie

什麼不工作？預期的行爲是什麼？你有沒有嘗試將'red'代碼移動到'ngAfterViewInit（）'？ –

@GünterZöchbauer該指令不改變組件HTML中h4文本的顏色。也沒有觸發console.log –

您是否已將共享模塊導入包含上述組件的模塊？ –

的Angular模塊系統的工作原理是這樣的：

您需要declare一個Component/Directive/......在只有一個NgModule。
然後，您可以在作爲此NgModule的一部分的Component中使用它。
要使用Component/Directive/......在任何其他NgModule，你需要在你想使用它的NgModule從宣佈NgModule和import申報NgModuleexport進去。

在你的情況declare和export的Directive在SharedModule和import在AppModule的SharedModule，但您使用Directive在另一個NgModule，這不importSharedModule和不importAppModule，因此不知道您的Directive。

所以要在NgModule使用的東西，它需要declare它，import申報NgModule或import一個NgModule，這import S上宣佈NgModule。
只有在聲明NgModule導出Directive時才能導入。

來源

2017-03-03 10:15:30 Springrbua

Angular2 * ngIf與子指令

回答

相關問題