Я разрабатываю репозиторий Github, который следует официальному учебнику Angular (Tour of Heroes). Вы можете увидеть весь код здесь:https://github.com/Ismaestro/angular7-example-app

Моя проблема в том, что у меня есть директива, объявленная в главном модуле приложения (app.module), и если я использую ее внутри AppComponent, она работает хорошо (директива только выделяет текст внутри элемента DOM).

Но у меня есть другой модуль под названием HeroesModule в AppModule, и внутри компонента этого модуля эта директива не работает. Основной код здесь:

приложение / app.module.ts

...

import { HighlightDirective } from "./shared/highlight.directive";

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        InMemoryWebApiModule.forRoot(InMemoryDataService),
        AppRoutingModule,
        CoreModule,
        HeroesModule
    ],
    declarations: [
        AppComponent,
        HeroTopComponent,
        HighlightDirective <-------
    ],
    providers: [
        { provide: APP_CONFIG, useValue: AppConfig }
    ],
    bootstrap: [ AppComponent ]
})

...

приложение / герои / heroes.module.ts

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        HeroRoutingModule
    ],
    declarations: [
        HeroListComponent,
        HeroSearchComponent,
        HeroDetailComponent,
        HeroFormComponent
    ],
    providers: [
        HeroService
    ],
    exports: [
        HeroSearchComponent
    ]
})

приложение / общий / highlight.directive.ts

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

@Directive({ selector: '[tohHighlight]' })

export class HighlightDirective {
    constructor(el: ElementRef) {
        el.nativeElement.style.backgroundColor = 'yellow';
    }
}

приложение / app.component.ts

<h1 tohHighlight>{{title}}</h1> <----- HERE WORKS
<toh-nav></toh-nav>
<router-outlet></router-outlet>

приложение / герои / герой-лист / герой-list.component.ts

<div *ngIf="selectedHero">
    <h2>
        {{selectedHero.name | uppercase}} is my hero
    </h2>
    <p tohHighlight>Test</p> <----- HERE IT DOESN'T
    <button (click)="gotoDetail()">View Details</button>
</div>

Вы можете увидеть, установить и протестировать его самостоятельно в репозитории Github, если вам это нужно.

Спасибо!