模块中的指令未执行

Question

在Angular8中，我创建了一个新模块并放入了一个新指令。但是在执行时没有任何反应（编译正常）。

我输入了控制台登录指令，因此以不同的方式查看它是否已执行但从未执行过，从未调用过构造函数。

<button button-confirmation></button>

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ButtonConfirmationComponent } from './component/button-confirmation.component';
import { ButtonConfirmationDirective } from './directive/button-confirmation.directive';

import {
  ConfirmationService,
  DomService
} from './services';

@NgModule({
  declarations: [
    ButtonConfirmationComponent,
    ButtonConfirmationDirective
  ],
  imports: [
    CommonModule
  ],
  providers: [
    ConfirmationService,
    DomService
  ]
})
export class ButtonConfirmationModule { }

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

@Directive({
  selector: '[button-confirmation]'
})
export class ButtonConfirmationDirective {

  constructor(private el: ElementRef) {
    console.log(el, 'test');
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}

@NgModule({
  declarations: [
    ...
  ],
  imports: [
@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...

    ButtonConfirmationModule

另一方面，如果我尝试使用组件 ButtonConfirmationComponent，我收到错误

'app-button-confirmation' is not a known element: 1. If 'app-button-confirmation' is an Angular component bla bla bla

此组件已移至模块的应用程序并在之前工作（内部未发生任何变化）。

我关注了很多文章和 angular 网站，都是一样的，所以我疯了，为什么模块中的指令不起作用？为什么组件不理解？

也许有帮助，我使用 Material Angular。

感谢您的帮助。

Answer 1

您的按钮 ButtonConfirmationModule 应该导出将用于其他模块的组件。

您必须更新您的模块声明

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ButtonConfirmationComponent } from './component/button-confirmation.component';
import { ButtonConfirmationDirective } from './directive/button-confirmation.directive';

import {
  ConfirmationService,
  DomService
} from './services';

@NgModule({
  declarations: [
    ButtonConfirmationComponent,
    ButtonConfirmationDirective
  ],
  imports: [
    CommonModule
  ],
  providers: [
    ConfirmationService,
    DomService
  ],
  exports : [

// These items can be used outside this module
    ButtonConfirmationComponent,
    ButtonConfirmationDirective
  ]
})
export class ButtonConfirmationModule { }

Answer 2

如果你想在另一个模块中使用一个模块的指令，你必须导出它。

声明告诉 Angular 组件或指令存在，导出告诉 Angular 您可以从模块外部访问它。

你可以找到更多的解释here

但基本上你需要修改这个

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ButtonConfirmationComponent } from './component/button-confirmation.component';
import { ButtonConfirmationDirective } from './directive/button-confirmation.directive';

import {
  ConfirmationService,
  DomService
} from './services';

@NgModule({
  declarations: [
    ButtonConfirmationComponent,
    ButtonConfirmationDirective
  ],
  exports: [ // <-- here
    ButtonConfirmationDirective,
  ],
  imports: [
    CommonModule
  ],
  providers: [
    ConfirmationService,
    DomService
  ]
})
export class ButtonConfirmationModule { }

Answer 3

任何 Module/Components/Pipe/Directive 为了被任何模块看到和使用，它需要在它的@NgModule class 中是 import/declare装饰器，并且它仅对该模块可见。（重要的是要知道 Components/Pipe/Directive 只能在整个应用程序的一个模块中声明一次）

因此，在您的情况下，ButtonConfirmationComponent、ButtonConfirmationDirective 仅对 [可见=14=]，但不被AppModule.

看到

从您的 ButtonConfirmationModule 导出 ButtonConfirmationComponent 和 ButtonConfirmationModule 所以无论导入哪个模块 ButtonConfirmationModule，这两个模块也对他们可见以供使用。

在你的ButtonConfirmationModule中：

exports : [
    ButtonConfirmationComponent,
    ButtonConfirmationDirective
 ]

模块中的指令未执行

Directive in module not executed

angular

angular-directive

angular8

angular-module