1

我发现当bootstrap()被调用时，它会将一个类实例与 DOM 上的选择器匹配并插入一个影子 DOM。

因此，为了尝试引导同一类的两个根组件，我在每个组件上都指定了一个不同的“选择器”。

但是，虽然每个组件都使用不同的“选择器”进行引导，但如果我查看每个组件的注释元数据，它们都指向相同的 '_hostElement.nativeElement'。

前任：

以下打印显示'_hostElement.nativeElement'的注释元。

console.log(Reflect.getMetadata('annotations', AppComponent));

对于以下类声明：

export class AppComponent {

constructor(private vcRef: ViewContainerRef, private resolver: ComponentResolver) {
  console.log('annotations');
  console.log(Reflect.getMetadata('annotations', AppComponent));

  }
}

这就是我引导每个实例的方式，以便它们具有不同的选择器：

bootstrap( Component({
  selector: 'my-app-' + id,
  encapsulation: ViewEncapsulation.Emulated,
  template: `<p>Dynamic Component {{message}}</p>`
 })(AppComponent)).then(app => {
    //app['_hostElement'].nativeElement =  `<div class="Ng2"><h1>Angular 2-${this.context.instanceId}</h2><my-app-${this.context.instanceId}/></div>`
    console.log(app['_hostElement'].nativeElement);
    console.log('Bootstrap Successful');
    console.log(app);
}, err => {
    console.error(err);
});

上面的引导函数返回一个 Promise，这对于两个实例都是成功的，这与人们所期望的相反。

当我检查 DOM 时，我可以看到有两个不同的“选择器”标签可以按预期标识根应用程序，但如下图所示 - 引导组件'ComponentRef_'指向相同的 '_hostElement.nativeElement'。

[这里是引导调用的 'ComponentRef_' - 两个调用都返回相同的 ComponentRef_ ][1]

如何让同一类的两个根组件很好地发挥作用？

4

0 回答 0