Angular2で同じコンポーネントの新しいインスタンスを挿入する方法

[更新]コンテキストを理解するために、コメント履歴をお読みください。Angular2で同じコンポーネントの新しいインスタンスを挿入する方法

すべて：私はそのクイックスタートガイドに従うとき

私はangular2にかなり新しいですが、一つの質問は私を混乱させる：

私のようにapp.component.tsを簡素化：

import { Component } from "angular2/core"; 
@Component({ 
    selector: "my-app", 
    template: "<div>{{title}}</div>" 
}) 
export class AppComponent { 
     title = "Tour of Heroes" + Math.random(); 
}

他のmy-appタグをindex.htmlに追加します。

<body> 
    <my-app>Loading...</my-app> 
    <my-app>Loading...</my-app> 
    </body>

2番目のレンダリングがレンダリングできないのはなぜですか？

これに関連したもう一つの問題がある：私は、同じコンポーネントの2つのインスタンスを配置する場合は

、それぞれが自分自身のメンバ変数を保持しますが、私は1つのコンポーネントにサービスを注入した場合、すべてのコンポーネントのインスタンスは、同じを共有@Componentと@Injectable、そしてディレクティブの配列の一方はプロバイダの配列の中で、一方はディレクティブの配列で、もう一つは別のアノテーションを使用していることが分かります。 私はこれらの2つの注釈がどのようにインスタンスまたはディレクティブ配列とプロバイダ配列を扱うことができる角度を教えているのだろうか？

出典

2016-03-07 Kuan

コメントを削除することができ、このリンクに例を見つけることができます。 – Tezra

Angular2では、HTMLページで同じコンポーネントを2回ブートストラップすることはできません。

ただし、同じHTMLページに必要な場合は、異なるアプリケーションコンポーネントをブートストラップすることは可能です。

詳細については、このドキュメントを参照してください：

https://angular.io/docs/ts/latest/api/platform/browser/bootstrap-function.html（セクション "ブートストラップ複数のアプリケーションを"）

編集

あなたの2番目の質問について、あなたはそれを認識する必要があり@Componentおよび@Injectableはデコレータです。彼らは、構成されたメタデータに基づいてコンストラクタ内に適切な依存関係インスタンスを提供することによって、ターゲットインスタンスを「ラップ」し、依存性注入を許可します。

階層インジェクタについて、あなたは、このリンクを見ている可能性があり：

What's the best way to inject one service into another in angular 2 (Beta)?

出典

2016-03-07 18:56:25

ありがとうございます。つまり、これはルートアプリケーションコンポーネントのみがこの制限の問題を抱えている可能性がありますか？私がコンポーネントをアプリケーションコンポーネントの中に入れたら、すべては問題ありませんか？ – Kuan

はい、ブートストラップレベルにしかありません。あなたはAngular2アプリケーションの中で必要なコンポーネントを使用することができます;-) –

同じページに複数の異なるコンポーネントをブートストラップすることもできます... –

これは現在サポートされていません。各ルートコンポーネントをbootstrap(AppComponent)で初期化する必要がありますが、両方のコンポーネントが異なるセレクタを持つ場合にのみ機能します。

は離れますが、同じHTMLページ内の他のコンポーネントを複数回使用することができ主成分から、私の知る限りでもhttps://github.com/angular/angular/issues/7136

出典

2016-03-07 18:56:44

はい、他のコンポーネント内のコンポーネントでうまく動作します。ルートコンポーネントには他にも制限がありますhttps://github.com/angular/angular/issues/1858 –

ありがとう、私はAngular2が新しいインスタンスを生成するか、既存のインスタンスを再利用するかを決定するのでしょうか？なぜなら私は '@Injectable'を使うのか' @confignet'を使うのだろうか？ – Kuan

角度DIは階層的です。各コンポーネント、ディレクティブ、パイプ、などは独自のインジェクタを持ち、各子コンポーネントインジェクタは親コンポーネントのインジェクタの子です。 'bootstrap（）'はルートインジェクタを作成します。 DIが依存関係を調べると、要求コンポーネントからルートに向かって反復処理が実行されます。プロバイダが見つかると、そこからインスタンスを要求します。プロバイダが見つかったインジェクタは、依存関係の単一のインスタンスを保持し、毎回同じものを返します。新しいインスタンスを取得した場合、または同じインスタンスをプロバイダに登録する場所によって異なります。 –

-1

を参照してください。

のhtmlであなたのセレクタ要素/ディレクティブの属性を宣言し、@Inputデコレータを使用して、コンポーネントでその属性の値を取得@Inputデコレータを使用することによって、これを達成することができます

から

インポート{コンポーネント、入力}」角度2 /コア ";コメントは、あなたが質問にその情報を反映すべきであるよりも、質問に答えるに重要な情報が含まれている場合

@Component({ 
    selector: "my-app", 
    template: "<div>{{title}}</div>" 
}) 
export class AppComponent { 
     @Input() title; 
}  
    <body> 
    <my-app title = "somedata1">Loading...</my-app> 
    <my-app title = "somedata2">Loading...</my-app> 
    </body>

は、

Angular2 .. Using the same component to show different data on the same page depending on service response

出典

2017-06-07 14:22:17 praveen

Angular2で同じコンポーネントの新しいインスタンスを挿入する方法

答えて

関連する問題