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中同一根应用程序的多个实例

回答

相关问题