Question

大家好，我将用几句话回答我的问题。我在“核心模块”文件夹中创建了一条指令，并将其添加到声明中并导出到此类模块中。此模块在App模块（主体模块）中实现。我在索引页中使用了指令装饰器（该页面在另一个模块页面模块中声明），一切都很好，我没有收到任何错误，但是指令的逻辑是不触发。

我尝试在页面模块中声明该指令及其工作。如果从核心模块中删除指令，它也会引发错误，这也很奇怪。无法确定类HasfunctionalityDirective的模块是否正确

指令

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

@Directive({
  selector: '[appHasfunctionality]'
})
export class HasfunctionalityDirective{


  constructor(
    private elem: ElementRef,
    private renderer: Renderer2
  ) { 
    this.renderer.setStyle(this.elem.nativeElement, 'color', 'blue');
  }
}

核心模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HasfunctionalityDirective } from './directives/hasfunctionality.directive';


@NgModule({
  declarations: [
    HasfunctionalityDirective
  ],
  imports: [
    CommonModule,
  ],
  exports: [
    HasfunctionalityDirective
  ]
})
export class CoreModule { }

应用模块


import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    CoreModule,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Index.html

<p appHasfunctionality>
  index works!
</p>

在这种情况下，元素“ p”应将颜色更改为蓝色。

如您所见，app模块接收了核心的所有元素，并且angular不会抛出任何错误，但逻辑未触发。

Answer 1

您只能在afterviewinit中引用该元素。试试这个

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

@Directive({
  selector: '[appHasfunctionality]'
})
export class HasfunctionalityDirective implements AfterViewInit {


  constructor(
    private elem: ElementRef,
    private renderer: Renderer2
  ) { 
  }

  ngAfterViewInit() {
    this.renderer.setStyle(this.elem.nativeElement, 'color', 'blue');
  }
}

Answer 2

找到了解决我问题的方法，我在顶层（主层）声明了该模块，而不是将其移至pages模块，因为我意识到这是唯一使用的地方。

指令已从核心模块声明并导出，但未触发Angular 7

指令

核心模块

应用模块

Index.html

2 个答案: