Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/28.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular2*ngIf带子指令_Angular_Directive_Angular Ng If - Fatal编程技术网

Angular2*ngIf带子指令

Angular2*ngIf带子指令,angular,directive,angular-ng-if,Angular,Directive,Angular Ng If,我似乎无法让我的指令发挥作用,不知道这是否是由于使用了*ngif 组件HTML: <div *ngIf="ticket" class="row"> <div class="col-xs-12"> <h4 appUsername>{{ticket.raisedBy.firstName}} {{ticket.raisedBy.surname}}</h4> </div> </div> 组件HTML中需要*

我似乎无法让我的指令发挥作用,不知道这是否是由于使用了*ngif

组件HTML:

<div *ngIf="ticket" class="row">
   <div class="col-xs-12">
      <h4 appUsername>{{ticket.raisedBy.firstName}} {{ticket.raisedBy.surname}}</h4>
   </div>
</div>
组件HTML中需要*ngIf,因为我正在从ngOnInit上的JSON服务收集数据

为简洁起见忽略代码:我正在将指令添加到导出指令的“共享”模块中。然后将此模块导入到主应用程序模块中

这是一个已知的问题还是我的代码


更新我现在可以工作了,但是我必须将指令导入到包含组件的模块中。我不能将其导入AppModule,然后全局使用吗?

角度
模块系统的工作原理如下:

  • 您需要
    声明
    组件
    /
    指令
    /。。。只需一个
    NgModule

    然后,您可以在属于此
    NgModule
    组件中使用它
    
  • 要使用
    组件
    /
    指令
    /。。。在任何其他
    NgModule
    中,您需要
    从声明的
    NgModule
    中导出它,并
    导入
    您想要使用它的
    NgModule
    中声明的
    NgModule
在您的案例中,您在
SharedModule
中声明
并导出
指令
,在
AppModule
中导入
SharedModule
,但您在另一个
NgModule
中使用
指令
,它不导入
共享模块
,也不导入
应用模块
,因此不知道您的指令

因此,要在
NgModule
中使用某个东西,它需要
声明它,
导入
声明的
NgModule
导入
a
NgModule
,这
导入
是声明的
NgModule


仅当声明的
NgModule
导出
指令时,导入才起作用

什么不起作用?预期的行为是什么?您是否尝试将
红色
代码移动到
ngAfterViewInit()
?@GünterZöchbauer该指令未更改组件HTML中h4中文本的颜色。您是否将共享模块导入到包含上述组件的模块?@GünterZöchbauer导入所有工作,并且应用程序的控制台中没有编码错误。如果未执行构造函数,则模块配置几乎100%存在问题。如果选择器匹配,则不会有太多其他原因导致它。
 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';
 }
}