Angular 2中相同根应用程序的多个实例

发布时间：2020-12-17 10:23:34 所属栏目：安全来源：网络整理

导读：我们将Angular 2集成到遗留页面中,使功能逐个用户友好.到目前为止,为角度模块交换预渲染的后端小部件效果很好. 但是我遇到了一个我不知道要解决的问题：我编写了一个模块/组件,可以在页面上的不同位置多次出现并使用不同的配置. body div class='somewhere-o

我们将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的情况.您只能看到初始化的第一个匹配项.有没有关于如何解决这个问题的概念？我想我不能使用包装器组件,因为我无法在其中移动整个模板(页面在后端呈现,而角度指令放在那里).

干杯

感谢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引用,但我认为在组件上使用预定义选择器更清晰.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!