Angular 5で、親コンポーネントから動的に追加された子コンポーネントにアクセスするにはどうすればよいですか?

Yermo Lamers

私はIonic + Angular5プロジェクトを開発しています。

一部のコンポーネントを動的にロードする必要があります。AngularドキュメントのDynamicComponent Loaderの例に従って、コンポーネントを正常にロードして表示することができます。

ただし、ロードされたコンポーネントをループできるようにする必要があります。

子コンポーネントを作成および破棄するときに、親内のコンポーネントの独自のリストを簡単に維持できますが、それは醜く、「AngularWay」ではないように思われます。

多くの実験と調査の結果、動的に追加されたコンポーネントには独自のビューがあるため、@ ViewChildrenを使用してアクセスできないようです。ViewChildrenが動的にコンポーネントを見つけられない

これは正しいです?

viewContainerRef.get()を使用して、子ビューを反復処理し、ViewRefを取得できます。しかし、ViewRefを指定してコンポーネントへの参照を取得する方法はないようです。

ViewRefの「rootNodes」プロパティに気づきましたが、そのプロパティはAngular docs View Refに記載されていません。ただし、EmbeddedViewRef docs Embedded View Refに記載されていますが、それでもコンポーネントにアクセスできないようです。

したがって、問題は、子コンポーネントを動的に追加する親がある場合、親ループから子コンポーネントを介してどのようにすればよいですか(子のメソッドの1つを呼び出すことができます)?私の疑いは、私が愚かな単純なものを見逃している、いくつかの根本的な誤解を持っている、または私が使用すべき別のパターンがあるということです。

動的コンポーネントローダーの例を変更して、実行しようとしていることを強調しました。変更された動的コンポーネントローダー

jburtondev

だから、私はこれについて考えました、そしてこれを行うためのクリーンな方法は(私の意見では)、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]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ