Angular 5 自定义局部指令可见，我的全局自定义指令不可见

Question

这是我写过的第一个和第二个指令。（抱歉）基本 CLI 框架。

HomePageModule 有主页组件加上 MyFirst.directive.ts 并且在 home-page.component.html 中被引用就好了。

MySecond.directive.ts几乎完全相同，但处于app.component水平。 app.module.ts 包含其声明，但 home-page.component.html 无法引用它。

AppModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {HomePageModule} from './home-page/home-page.module';
import {MySecondDirective} from './MySecond.directive';  <<=====


@NgModule({
  declarations: [
    AppComponent,
    MySecondDirective  <<=====
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HomePageModule
  ],
  providers: [],
  exports: [MySecondDirective],   <<=====
  bootstrap: [AppComponent]
})
export class AppModule { }

主页模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomePageComponent } from './home-page/home-page.component';
import {MyFirstDirective} from './home-page/MyFirst.directive'; <<<=====

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    HomePageComponent,
    MyFirstDirective    <<<=====
  ],
  exports: [
    HomePageComponent,
    MyFirstDirective    <<<=====
  ]
})
export class HomePageModule { }

首页HTML

<p>
  home-page works!
</p>
<div>
  <h1 myfirst>TESTING</h1>
  <h3 mysecond>Again</h3>
</div>

程序输出

程序结构

我的第一个指令：

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

@Directive({
  selector: '[myfirst]'
})
export class MyFirstDirective {

  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
    const nativeElement = elementRef.nativeElement;
    this.renderer.setStyle( nativeElement, 'color', 'red');
    this.renderer.setStyle( nativeElement, 'background-color', 'yellow');
    this.renderer.setStyle( nativeElement, 'border', '1px solid green');
  }
}

我的第二个指令：

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

@Directive({
  selector: '[mysecond]'
})
export class MySecondDirective {

  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
    const nativeElement = elementRef.nativeElement;
    this.renderer.setStyle( nativeElement, 'color', 'green');
    this.renderer.setStyle( nativeElement, 'background-color', 'orange');
    this.renderer.setStyle( nativeElement, 'border', '2px solid red');
  }
}

提前致谢！查克

Answer 1

Angular 模块不分层。

在根 AppModule 中注册指令只会告诉 Angular AppModule 使用已声明的指令。您仍然需要将它导入到您想要使用该指令的任何模块中。

通常，不建议从根 AppModule 导出任何内容，因为您不会将根模块导入任何其他模块。

如果您希望 components/directives 在应用的多个模块中使用，请创建一个 SharedModule，从那里导出 components/directives 并将其导入到使用它们的任何模块中。

The biggest confusion regarding imported modules is that developers think they make a hierarchy. And it’s probably reasonable to assume that a module that imports other modules becomes the parent module for its imports. However, that’s not what happens. All modules are merged during compilation phase. And thus there’s no hierarchical relationship between the module that is imported and the module that imports.

from Angular In Depth

Angular 5 自定义局部指令可见，我的全局自定义指令不可见

Angular 5 custom Local directive is visible, my global custom directive is not

element

dynamic

styling

typescript

angular