Я разрабатываю репозиторий 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, если вам это нужно.
Спасибо!