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中同一根應用程序的多個實例

回答

相關問題