模块中的指令未执行答案

【问题标题】：Directive in module not executed模块中的指令未执行
【发布时间】：2019-12-11 20:31:42
【问题描述】：

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

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

<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' 不是已知元素： 1.如果'app-button-confirmation'是一个Angular组件bla bla bla

这个组件移动到应用程序到模块并且之前工作过（内部没有改变）。

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

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

感谢您的帮助。

【问题讨论】：

您是否将指令附加到 HTML 元素？

标签： angular angular-directive angular8 angular-module

【解决方案1】：

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

因此，在您的情况下，ButtonConfirmationComponent、ButtonConfirmationDirective 仅对 ButtonConfirmationModule 可见，而 ButtonConfirmationModule 看不到强>AppModule。

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

在您的 ButtonConfirmationModule 中：

exports : [
    ButtonConfirmationComponent,
    ButtonConfirmationDirective
 ]

【讨论】：

谢谢，之前测试过这个没有结果，我想我在测试之间错过了一些东西。

【解决方案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 { }

【讨论】：

【解决方案3】：

您的按钮 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 { }

【讨论】：