我们将 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>
这是一个笨蛋案件的。您可以看到只有第一个出现被初始化。有没有关于如何解决这个问题的概念？我认为我不能使用包装器组件，因为我无法移动其中的整个模板（页面在后端渲染，角度指令放在其中）。
Cheers
感谢 Tobias Bosch 在 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 引用，但我认为在组件上使用预定义选择器会更干净。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
