Angular2レンダリングコンポーネントからボディ

Angular2コンポーネント<my-button>があり、ボタンをクリックしたときに表示されるドロップダウンメニューでレンダリングするオプションを入力したいとします。私は<my-menu>ようなメニュー構成要素を持っているし、渡されたオプションがある場合、それは<my-button>のテンプレートに条件付きでレンダリングします。Angular2レンダリングコンポーネントからボディ

たぶん私はちょうど絶対に所望の位置決めを達成するために<my-button>内<my-menu>を配置することができます。しかし、おそらく私は含める要素にoverflow:hiddenを持っていて、それはクリップ<my-menu>を持っているためにできません。ですから、代わりに<my-menu>を<body>にレンダリングし、それを絶対に<my-button>に配置する必要があります。

<my-button>のテンプレートの代わりに<my-menu>〜<body>を配置する方法はありますか？

ありがとうございます！

出典

2016-08-25 Comptonburger

いいえ、ありません。

AppComponent以外のコンポーネントをブートストラップし、代わりに共有サービスを使用して通信できます。

AppComponentに兄弟としてコンポーネントを動的に作成する方法については、https://github.com/angular/angular/issues/9293で説明していますが、これがどのような場合にどのように影響するかは不明です。

出典

2016-08-25 05:28:33

はおそらく、余分な何かをブートストラップする必要微ないだろう。しかし、共有サービスを使ってコミュニケーションをとることができますか？主に、コンポーネントツリー上の根本的に異なる場所にあるメニューとボタンをどのようにレンダリングしてから、2つを関連付けるのでしょうか？ – Comptonburger

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service –

@GünterZöchbauerで説明する必要があります。以下のコメントで述べたように、多くの定型的な機能とユビキタス機能''に任意のコンポーネントを追加する機能が必要です：モーダル、ツールチップ、うなり声のような通知、OPが記述するメニュー... 2.0.x（GA）でどのようなことが達成できるか考えてみましょうか？ – AndyPerlitch

はい、できます。コードを提供していないので、私はあなたに最新の例を与えることはできません。しかし、私はモーダルシステムを構築したときに、私はベースとしてこれを使用する：私たちは最初にでそれを引っ張ったときhttps://github.com/shlomiassaf/angular2-modal

を、それは非常に再利用できませんでしたが、ApplicationRefを経由して、ルートノードを取得する方法があります。（これはAngular 2 Beta 8の回りに戻りました）

間違いなく実行できます。

更新：注入する場所を取得するにはApplicationRefを使用し、新しいコンポーネントを注入するにはDynamicComponentLoaderを使用します。あなたhostLocation（DynamicComponentLoaderのloadIntoLocationメソッドの2番目のパラメータ）として、次の行を使用すると、HTMLだけでアプリのコンポーネントの後に要素を配置します：

this.appRef['_rootComponents'][0].location

appRefは私のコンポーネントのコンストラクタに渡されApplicationRefへの参照です。

ベータ版の後に出てきた他の要素や方法を使って、あなたが望む効果を得ることができるかもしれません。しかし、それは複雑で、https://medium.com/tixdo-labs/angular-2-dynamic-component-loader-752c3235bf9#.x913qdh4u

出典

2016-09-30 18:53:55 ps2goat

Anger2 GAで 'DynamicComponentLoader'は引き続き利用できますか？私はそれに関する文書を見つけることができません。そして、これは、いくらかComponentResolverにリンクされているようです。これは、 'Compiler'のために完全に廃止されました。 – AndyPerlitch

実際には、あなたが提供したmedia.comのブログリンクがangular2のために機能しなくなったかのように見えます – AndyPerlitch

@AndyPerlitch - 私が使用していたベータ版のサンプルにラベルを付ける理由です。私はまだRC 1でそれをやり遂げることができたと思うが、私たちは、彼らが主なパッケージで公開しているよりも深いファイルに直接リンクしなければならなかった。私はRC 1以来それを試していないが、私は最終版でそれを試すことができます。 – ps2goat

あなたはそれを行うことができます。

は、ここで例の多くの別の良いサイトです。

declarationsとentryComponents
は、アプリケーション・コンポーネントにそれを注入するViewContainerRefを根絶への参照を取得モジュールにあなたの動的コンポーネントを追加します。
また、注射を使用してComponentFactoryResolverへの参照を得てください。

使用このような何か：コンポーネントの削除

private resolverFactory:ComponentFactoryResolver; 
private viewContainer:ViewContainerRef; 

var compFactory:ComponentFactory<Frame> = this.resolverFactory.resolveComponentFactory(Frame); 

var cmpRef:ComponentRef<Frame> = this.viewContainer.createComponent(compFactory, this.viewContainer.length);

：
```
cmpRef.destroy(); 
```

出典

2016-10-03 21:44:14 kemsky

をあなたは条件付きでコンポーネントをロードしたい場合は、ComponentResolverFactoryを利用することができます。

すべて必要なのは、1つのviewContainerRefインスタンス&を必要に応じてコンパイラを使用して更新することです。

動的にロードするすべてのコンポーネントに対して個別にモジュールを作成して、非同期でロードすることをお勧めします。&

おそらく、以下の回答はより良い方法でお手伝いします。

AppComponent` `の内部でレンダリング

Load Components Dynamically

出典

2016-10-05 15:01:29

Angular2レンダリングコンポーネントからボディ

答えて

関連する問題