1. ホーム
  2. angular

ComponentFactoryResolverで作成したコンポーネントで@Inputを使用するにはどうしたらよいですか?

2023-12-06 04:02:26

質問

動的に作成されるAngular 2コンポーネントに@Inputプロパティを定義するために使用できるメソッドはありますか?

私は ComponentFactoryResolver を使用して、コンテナ・コンポーネント内にコンポーネントを作成しています。 例えば

let componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentName);

let componentRef = entryPoint.createComponent(componentFactory);

ここで、"entryPoint"はコンポーネントのHTMLでは以下のようなものです。

<div #entryPoint></div>

で、私のコンテナ・コンポーネントに定義されています。

@ViewChild('entryPoint', { read: ViewContainerRef } entryPoint: ViewContainerRef;

これはうまくいくのですが、新しく作成されたコンポーネントに @Input プロパティを動作させる方法が見当たりません。 コンポーネント クラスに明示的にパブリック プロパティを設定できることは知っていますが、これは ng-reflect では機能しないようです。 この変更を行う前に、私は "selected" プロパティを "@Input()" で装飾し、Angular が DOM に以下を追加する原因になっていました。

<my-component ng-reflected-selected="true"></my-component>

これで、マークアップを動的に更新して、CSSクラスを切り替えることができました。

<div class="header" [class.active-header]="selected === true"></div>

いくつかの検索に基づいて、私は "@Output" を期待通りに動作させる方法を見つけることができましたが、@Input についてはまだ何も見つかっていません。

追加のコンテキストが有用であれば教えてください。

どのように解決するのですか?

いいえ、Angular2バインディングはコンポーネントと、コンポーネントのテンプレートに静的に追加されたディレクティブにのみ動作します。

他のすべての状況では、以下の説明のように共有サービスを使用してください。 https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

また

let componentRef = entryPoint.createComponent(componentFactory);
componentRef.instance.someProp = 'someValue';
componentRef.instance.someObservableOrEventEmitter.subscribe(data => this.prop = data);