如何在特征模型中创建指令并以角度在应用程序组件中使用

Question

我创建了功能模块 将一个名为 HighlightDirective 的指令添加到 FeatureModule。在 AppModule 中使用 FeatureModule 的指令。如果将此指令用于 para，则 para 元素上发生 mouseenter 事件时 para 的背景色应变为蓝色，而当 mouseleave 事件发生时则无背景色。如果我使用 HighlightDirective 到 FeatureModule 它不起作用。但如果我将 HighlightDirective 用于 appModule，它就可以工作。

我的代码如下。

feature.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HighlightDirective } from '../highlight.directive';
@NgModule({
  declarations: [HighlightDirective],
  imports: [
    CommonModule
  ]
})
export class FeatureModule { }

highlight.directive.ts

import { Directive, ElementRef, Renderer2, OnInit, HostListener, HostBinding, Input } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

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

    ngOnInit(){
      this.color = this.defaultColor;
    }


    @Input() defaultColor;
    @Input() highlight: string= 'lime';

    @HostBinding('style.color') color:string = this.defaultColor;


    @HostListener('mouseenter') mouseover(){
      console.log('mouseover');
      this.renderer.setStyle(this.elementRef.nativeElement, 'background-color', 'blue');

      this.color=this.highlight;
    }

    @HostListener('mouseleave') mouseleave(){
      this.renderer.setStyle(this.elementRef.nativeElement, 'background-color', 'transparent');
      this.color=this.defaultColor;
    }

}

app.module.ts

   import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FeatureModule } from './feature/feature.module';

//import { TestDirective } from './test.directive';

@NgModule({
  declarations: [
    AppComponent,
   // TestDirective,


  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FeatureModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

appcomponent.html

<p appHighlight defaultColor="gray">Start editing to see some magic happen</p>
<router-outlet></router-outlet>

Answer 1

将此添加到您的 feature.component.ts

**@NgModule({
    imports: [ CommonModule],
    declarations: [FeatureModule],
    exports: [FeatureModule, CommonModule]
    })
    export class FeatureModuleExtended {}**

然后在 app.module.ts -> 导入 -> FeatureModuleExtended

Answer 2

1. [feature.module.ts] 声明你的指令

    @NgModule({
      declarations: [HighlightDirective],
      imports: [
        CommonModule
      ]
    })

1. [feature.module.ts] exports 指令

    @NgModule({
      declarations: [HighlightDirective],
      imports: [
        CommonModule
      ],
      exports: [HighlightDirective]
    })

1. [app.module.ts] imports FeatureModule

    @NgModule({
      declarations: [
        AppComponent,
      ],
      imports: [
        FeatureModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })