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

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>

节目输出

计划结构

MyFirstDirective：

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');
  }
}

MySecondDirective：

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导出任何内容，因为您不会将根模块导入任何其他模块。

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

  

关于导入模块的最大困惑是开发人员认为他们构建了一个层次结构。假设导入其他模块的模块成为其导入的父模块，这可能是合理的。然而，事情并非如此。在编译阶段合并所有模块。因此，导入的模块与导入的模块之间没有层次关系。

     

来自Angular In Depth