このガイドでは、Angularにおける依存性の注入の追加機能について説明します。
NOTE: InjectionTokenとカスタムプロバイダーの包括的な説明については、依存性プロバイダーの定義ガイドを参照してください。
コンポーネントのDOM要素を注入する
開発者は避けるように努めていても、一部の視覚効果とサードパーティツールでは、直接DOMにアクセスする必要があります。 そのため、コンポーネントのDOM要素にアクセスする必要がある場合があります。
Angularは、@Componentまたは@Directiveの基になる要素を、ElementRefインジェクショントークンを使用してインジェクションすることで公開します。
import {Directive, ElementRef, inject} from '@angular/core';@Directive({ selector: '[appHighlight]',})export class HighlightDirective { private element = inject(ElementRef); update() { this.element.nativeElement.style.color = 'red'; }}前方参照を使用して循環した依存関係を解決する
TypeScriptでは、クラスの宣言順序が重要です。 定義されるまでは、クラスを直接参照できません。
これは、特に推奨される_1ファイルにつき1クラス_ルールに従っている場合は通常問題ありません。 しかし、循環参照は避けられない場合があります。 たとえば、クラス'A'がクラス'B'を参照し、'B'が'A'を参照する場合、いずれか一方を最初に定義する必要があります。
AngularのforwardRef()関数は、Angularが後で解決できる_間接的な_参照を作成します。
クラスが_自分自身を参照する_場合にも、同様の問題が発生します。
たとえば、providers配列内です。
providers配列は、@Component()デコレーター関数のプロパティであり、クラス定義の前に表示される必要があります。
forwardRefを使用して、このような循環参照を解消できます。
app.component.ts
providers: [ { provide: PARENT_MENU_ITEM, useExisting: forwardRef(() => MenuItem), },],