Angular 2の同じルートアプリケーションの複数のインスタンス

従来のページにAngular 2を統合して、機能をより使いやすくしました。これまでに、角度モジュールのために事前に準備されたバックエンドウィジェットを交換することは素晴らしい仕事でした。Angular 2の同じルートアプリケーションの複数のインスタンス

しかし、私は解決することがわからない問題に遭遇しました。ページ上で異なる場所や異なる設定で複数回発生するモジュール/コンポーネントを作成しました。

<body> 
    <div class='somewhere-on-the-page'> 
     <my-widget config='A'></my-widget> 
    </div> 
    <div class='somewhere-else-on-the-page'> 
     <my-widget config='B'></my-widget> 
    </div> 
    </body>

Here is a Plunkerの場合です。最初のオカレンスのみが初期化されていることがわかります。これに取り組む方法についてのコンセプトはありますか？私はそれの中でテンプレート全体を動かすことができないので、私はラッパーコンポーネントを使うことができないと思う（バックエンドではレンダリングされ、角度指示はそこに置かれる）。

乾杯

出典

2016-08-30 Tom

これは現在サポートされていません。 bootstrap()が呼び出されたときにセレクタを無効にすることを可能にする未解決の問題があります。

https://github.com/angular/angular/issues/7136

出典

2016-08-30 15:49:18

彼はgithubの上で与えたいくつかのポインタのためのトビアス・ボッシュのおかげで、これは彼が提案した回避策の調整バージョンです：

import {ApplicationRef_} from '<project-root>/node_modules/@angular/core/src/application_ref' 

@NgModule({ 
    imports: [BrowserModule], 
    declarations: [MyWidgetComponent], 
    entryComponents: [MyWidgetComponent] 
}) 
class MyWidgetModule { 
    constructor(injector: Injector, cfr: ComponentFactoryResolver, appRef: ApplicationRef) { 
    const widgetCompFactory = cfr.resolveComponentFactory(MyWidgetComponent); 
    $(widgetCompFactory.selector).each((_, el) => { 
     var compRef = widgetCompFactory.create(injector, [], el); 
     var upcasted = <ApplicationRef_> appRef; 
     upcasted.registerChangeDetector(compRef.changeDetectorRef); 
    }); 
    } 
}

は角ファイルからApplicationRef_をインポートするように注意してください。あなたは角型にデフォルトではエクスポートされていないので、直接インポートする必要があります。

また、$('my-widget')（または他のセレクタを使用してください）を使用してDOM参照を取得することもできますが、コンポーネントの定義済みセレクタを使用する方がクリーンです。

出典

2016-08-31 09:32:27 Tom

Angular 2の同じルートアプリケーションの複数のインスタンス

答えて

関連する問題