Angular2のAPIからページへの名前による動的にdddコンポーネント

ジェームズ・マキンデ

私はAngularの初心者であり、Web APIから返されたコンポーネント名を使用して、特定のルールに基づいてページにコンポーネントを動的に追加するプロジェクトがあります。基本的に、ユーザーはボタンをクリックして新しいコンポーネントA、B、C、Dなどを追加できます。次に、以前に追加したコンポーネントに基づいてそのコンポーネントを追加できるかどうかを確認してから、コンポーネントを追加する必要があります。コンポーネントが不明であるため、DBで名前を定義しましたが、Angular 2でこのようなことを行うには、非常に多くの異なる、やや紛らわしい方法を見てきました。

ComponentFactoryResolverを使用してAngularページにコンポーネントを動的に追加するためのオンラインおよびplunkrの例をいくつか見てきましたが、親クラスで子コンポーネントを事前定義する必要がありますが、私の場合はそれができません。ほとんどの例では、子コンポーネント名をハードコーディングする必要がありました。以前に動的に追加されたコンポーネントを参照し、Angular 2のAPIが受け取った名前で新しいコンポーネントを追加する方法はありますか?それが現実的かどうかはわかりません。

オスマンシー

作成されたViewContainerRef場所への参照がある限り、以前に作成されたコンポーネントが何であったかを実際に知ることができます。作成されたコンポーネントの名前を格納し、その参照に基づいてロジックを作成するサービスを作成することもできるため、その部分は大したことではありません。

ただし、マークアップで宣言されておらず、実行時に作成されるコンポーネントがあることをAngularに伝える必要があります。そのclassため、これらのコンポーネントを、entryComponents現在のコンポーネントプロパティに渡す必要があります。動的コンポーネントをインスタンス化します。これを行わないと、Angularはそれらを捨てるだけであり、それらが実際に存在することに気付かないでしょう。

だから、短い答え:

  1. はい、以前に作成したコンポーネントに関連するカスタムロジックに基づいて動的にコンポーネントを作成することができます。
  2. はい、API呼び出しで受け取った名前に基づいてコンポーネントを作成することは可能ですが、これらのコンポーネントはAngularアプリケーションで事前に定義する必要がentryComponentsあり、インスタンス化されるコンポーネントに関してそれらを渡す必要があります。
  3. どうやるか?この回答を確認してください。基本的に動的コンポーネントを作成するロジックを抽象化しているため、コンポーネント名と小道具を渡すだけで済みます。

ただし、最初のポイントについてサポートが必要な場合は、簡単な例を設定してみてください。サポートさせていただきます。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

別のコンポーネントに移動する前に、Angular2コンポーネントからデータを保存します

分類Dev

Angular2:どのように子供に親コンポーネントから通信するには?

分類Dev

Angular2同じページに複数のコンポーネント

分類Dev

コンポーネントを別のコンポーネントに動的に表示する方法Angular2

分類Dev

あるコンポーネントリンクから別のコンポーネントへのWebページの特定の部分へのAngular2ルーティング

分類Dev

サーバーから親コンポーネントから子コンポーネントへのオブジェクトの受け渡しangular2

分類Dev

Angular2の別のコンポーネントの中にコンポーネントを配置するにはどうすればよいですか?

分類Dev

Angular2の別のコンポーネントの中にコンポーネントを配置するにはどうすればよいですか?

分類Dev

Angular2の別のコンポーネントの中にコンポーネントを配置するにはどうすればよいですか?

分類Dev

API呼び出しからのデータに応じて、Angular2でコンポーネントを動的に作成します

分類Dev

ページ上のjsonオブジェクトをAngular2コンポーネントに渡します

分類Dev

ホストコンポーネントのAngular2からコンポーネントスタイルをターゲットにする方法

分類Dev

Angular7コンポーネントから別のコンポーネントに移動する

分類Dev

ルートへのAngular2動的コンポーネントインジェクション

分類Dev

コンパイル時にangular2でクラス名を知らなくても、コンポーネントのクラスを動的にインポートする方法はありますか?

分類Dev

あるコンポーネントから次のコンポーネントへのAngular2パスイベント

分類Dev

角度2の子コンポーネントで親コンポーネントの名前を取得するにはどうすればよいですか?

分類Dev

Angular2を使用してページに多くのフォームコンポーネントをインポートする

分類Dev

Angular2あるコンポーネント関数を別のコンポーネントで使用するにはどうすればよいですか

分類Dev

コンポーネントからのAngular2 getBoundingClientRect

分類Dev

Angular2の子コンポーネントから親コンポーネントを更新する方法

分類Dev

Angular2 の別のコンポーネントから FormGroup 値にアクセスするにはどうすればよいですか?

分類Dev

Angular2はあるコンポーネントから別のコンポーネントに変数を渡します

分類Dev

ペアのコンポーネントに名前を付ける方法

分類Dev

反応コンポーネントはどのように前のページコンポーネントに値を渡しますか

分類Dev

ページの最上部にコンポーネントを動的に作成する

分類Dev

Angular2-動的に作成された要素へのコンポーネント

分類Dev

既存のコンポーネントを動的にロードするAngular2 Final Release

分類Dev

動的に作成されたコンポーネントのビューを並べ替えるAngular2?

Related 関連記事

  1. 1

    別のコンポーネントに移動する前に、Angular2コンポーネントからデータを保存します

  2. 2

    Angular2:どのように子供に親コンポーネントから通信するには?

  3. 3

    Angular2同じページに複数のコンポーネント

  4. 4

    コンポーネントを別のコンポーネントに動的に表示する方法Angular2

  5. 5

    あるコンポーネントリンクから別のコンポーネントへのWebページの特定の部分へのAngular2ルーティング

  6. 6

    サーバーから親コンポーネントから子コンポーネントへのオブジェクトの受け渡しangular2

  7. 7

    Angular2の別のコンポーネントの中にコンポーネントを配置するにはどうすればよいですか?

  8. 8

    Angular2の別のコンポーネントの中にコンポーネントを配置するにはどうすればよいですか?

  9. 9

    Angular2の別のコンポーネントの中にコンポーネントを配置するにはどうすればよいですか?

  10. 10

    API呼び出しからのデータに応じて、Angular2でコンポーネントを動的に作成します

  11. 11

    ページ上のjsonオブジェクトをAngular2コンポーネントに渡します

  12. 12

    ホストコンポーネントのAngular2からコンポーネントスタイルをターゲットにする方法

  13. 13

    Angular7コンポーネントから別のコンポーネントに移動する

  14. 14

    ルートへのAngular2動的コンポーネントインジェクション

  15. 15

    コンパイル時にangular2でクラス名を知らなくても、コンポーネントのクラスを動的にインポートする方法はありますか?

  16. 16

    あるコンポーネントから次のコンポーネントへのAngular2パスイベント

  17. 17

    角度2の子コンポーネントで親コンポーネントの名前を取得するにはどうすればよいですか?

  18. 18

    Angular2を使用してページに多くのフォームコンポーネントをインポートする

  19. 19

    Angular2あるコンポーネント関数を別のコンポーネントで使用するにはどうすればよいですか

  20. 20

    コンポーネントからのAngular2 getBoundingClientRect

  21. 21

    Angular2の子コンポーネントから親コンポーネントを更新する方法

  22. 22

    Angular2 の別のコンポーネントから FormGroup 値にアクセスするにはどうすればよいですか?

  23. 23

    Angular2はあるコンポーネントから別のコンポーネントに変数を渡します

  24. 24

    ペアのコンポーネントに名前を付ける方法

  25. 25

    反応コンポーネントはどのように前のページコンポーネントに値を渡しますか

  26. 26

    ページの最上部にコンポーネントを動的に作成する

  27. 27

    Angular2-動的に作成された要素へのコンポーネント

  28. 28

    既存のコンポーネントを動的にロードするAngular2 Final Release

  29. 29

    動的に作成されたコンポーネントのビューを並べ替えるAngular2?

ホットタグ

アーカイブ