ComponentFactoryResolverで作成したコンポーネントで@Inputを使用するにはどうしたらよいですか?
質問
動的に作成される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);
関連
-
[解決済み] Angular 2の@ViewChildアノテーションがundefinedを返す
-
[解決済み] NGIf else "の使い方を教えてください。
-
[解決済み】Angular - サービスとコンポーネントでパイプを使用する
-
[解決済み] angular-cliのビルドでカスタムファイルをインクルードするには?
-
[解決済み] タイプスクリプト タイプ X はタイプ Y の length、pop、push、concat、その他 26 のプロパティが欠落しています。[2740]
-
[解決済み] Angular2 bodyタグにクラスを追加する
-
[解決済み] Error: モジュールによってインポートされた予期しない値 'undefined'。
-
[解決済み] angular-cli server - APIリクエストを別のサーバーにプロキシする方法は?
-
[解決済み] aria-valuenow' は 'div' の既知のプロパティではないため、バインドできません。
-
[解決済み] Angular2で生のhtmlをバインドする方法 [重複]。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Angular 2: 反応するフォームコントロールの反復処理
-
[解決済み] angular-cliのパラメータ --base-href と --deploy-url の違いは何ですか?
-
[解決済み] Angular v5からAngular v6にプロジェクトをアップグレードしたい。
-
[解決済み] RxJSのmap演算子でエラーを出す方法 (angular)
-
[解決済み] Angular2ルートでAngularの方法でパラメータを取得するには?
-
[解決済み] Angular : ルートへの手動リダイレクト
-
[解決済み] Angular2で生のhtmlをバインドする方法 [重複]。
-
[解決済み] Angular 2でコンポーネントの静的変数をHTMLにバインドする方法は?
-
[解決済み] mat-selectでデフォルトのオプションを設定する
-
[解決済み] angular2でdata-*属性にバインドする方法は?重複