Как создать директиву в модели объектов и использовать в компоненте приложения в angular - PullRequest
Новая
       5

Как создать директиву в модели объектов и использовать в компоненте приложения в angular

0 голосов
/ 03 февраля 2020

Я создал функциональный модуль Добавьте одну директиву HighlightDirective в FeatureModule. Используйте директиву FeatureModule в AppModule. Если вы используете эту директиву для параграфа, цвет фона параграфа должен стать синим, когда событие 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>

1 Ответ

0 голосов
/ 03 февраля 2020

Добавьте это к вашему feature.component.ts 

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

, затем в app.module.ts -> import -> FeatureModuleExtended

...