私はIonic + Angular5プロジェクトを開発しています。
一部のコンポーネントを動的にロードする必要があります。AngularドキュメントのDynamicComponent Loaderの例に従って、コンポーネントを正常にロードして表示することができます。
ただし、ロードされたコンポーネントをループできるようにする必要があります。
子コンポーネントを作成および破棄するときに、親内のコンポーネントの独自のリストを簡単に維持できますが、それは醜く、「AngularWay」ではないように思われます。
多くの実験と調査の結果、動的に追加されたコンポーネントには独自のビューがあるため、@ ViewChildrenを使用してアクセスできないようです。ViewChildrenが動的にコンポーネントを見つけられない
これは正しいです?
viewContainerRef.get()を使用して、子ビューを反復処理し、ViewRefを取得できます。しかし、ViewRefを指定してコンポーネントへの参照を取得する方法はないようです。
ViewRefの「rootNodes」プロパティに気づきましたが、そのプロパティはAngular docs View Refに記載されていません。ただし、EmbeddedViewRef docs Embedded View Refに記載されていますが、それでもコンポーネントにアクセスできないようです。
したがって、問題は、子コンポーネントを動的に追加する親がある場合、親ループから子コンポーネントを介してどのようにすればよいですか(子のメソッドの1つを呼び出すことができます)?私の疑いは、私が愚かな単純なものを見逃している、いくつかの根本的な誤解を持っている、または私が使用すべき別のパターンがあるということです。
動的コンポーネントローダーの例を変更して、実行しようとしていることを強調しました。変更された動的コンポーネントローダー
だから、私はこれについて考えました、そしてこれを行うためのクリーンな方法は(私の意見では)、parentContext
データやメソッドをこのオブジェクトに渡すなど、親コンポーネントにプロパティを作成することです。
例-親コンポーネントでは、メソッドを子コンポーネントに渡すこともでき、そのメソッドは親のコンテキスト内で実行されます。:
gotoDetail(hero: Hero): void {
this.entry.clear();
const factory = this.resolver.resolveComponentFactory(DynamicModalChildComponent);
this.dynamicModalComponentRef = this.entry.createComponent(factory);
this.dynamicModalComponentRef.instance.hero = hero;
// Pass parent context to child in order to close modal hierarchically (parent/child component relationship).
// This approach is less verbose and makes it easier to unit test than a service in my opinion.
this.dynamicModalComponentRef.instance.parentContext = () => this.destroyComponent();
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加