web-dev-qa-db-ja.com

Angularのすべてのモジュールに対してディレクティブをグローバルに宣言する方法は？

Angular（Tour of Heroes）の公式チュートリアルに従うGithubリポジトリを開発しています。すべてのコードはここにあります： https://github.com/Ismaestro/angular7-example-app

私の問題は、アプリのメインモジュール（app.module）で宣言されたディレクティブがあり、それをAppComponent内で使用するとうまく機能することです（ディレクティブはDOM要素内のテキストのみを強調表示します）。

しかし、AppModule内にはHeroesModuleという別のモジュールがあり、このモジュールのコンポーネント内では、このディレクティブは機能しません。メインコード、ここ：

app/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 ]
})

...

app/heroes/heroes.module.ts

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

app/shared/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/app.component.ts

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

app/heroes/hero-list/hero-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リポジトリで自分で確認、インストール、テストできます。

ありがとう！

javascriptangularangular2-directivesangular2-modules
17
ismaestro

例： Plunker

どこでも使用するためにコンポーネント/ディレクティブが必要な場合。新しいモジュールを作成する必要があります。

angle-cliを使用する場合、以下を生成できます。

ng g module my-common

モジュール：

@NgModule({
 declarations: [MyCommonComponent],
 exports:[MyCommonComponent]
})
export class MyCommonModule{}

重要！ exportsを使用すると、モジュールの外部でコンポーネント/ディレクティブを使用できます。

コンポーネント/ディレクティブ：

@Component({
  selector: 'common-component',
  template: `<h1> common component</h1>`
})
export class MyCommonComponent{}

最後に、必要な場所にモジュールをインポートし、AppModuleに配置して、アプリのどこでも使用できます。

例えば：

@NgModule({
  imports: [MyCommonModule]
})
export class AppModule{}

がんばろう！

16
YairTawil

@CrazyMacのコメントによると、良い方法はDirectivesModuleを作成することです。このモジュール内で、すべてのディレクティブを宣言およびインポートできます。その後、任意の場所にこのモジュールをインポートできます。

app/modules/directives/directives.module.ts

import { NgModule } from '@angular/core';
import { HighlightDirective } from './highlight.directive';

@NgModule({
  imports: [],
  declarations: [HighlightDirective],
  exports: [HighlightDirective]
})
export class DirectivesModule { }

app/modules/directives/highLight.directive.ts

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

@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}

app/modules/otherModule/other-module.module.ts

import { DirectivesModule } from '../directives/directives.module';

@NgModule({
  imports: [
    DirectivesModule
  ],
  declarations: []
})
export class OtherModule { }
20
Lilrom