Question

我发现当调用 bootstrap（）时，它会将类实例与DOM上的选择器匹配，并插入一个shadow DOM。

因此，为了尝试获取同一类引导的两个根组件，我在每个组件上都指定了一个不同的'selector'。

然而，虽然每个组件都使用不同的“选择器”进行引导，但如果我查看每个Component的注释元数据，它们都指向相同的'_ 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);
});

上面的bootstrap函数返回一个Promise，它对两个实例都是成功的，与人们的期望相反。

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

[这是bootstrap调用的'ComponentRef_' - 两个调用都返回相同的ComponentRef _ ][1]

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

在Angular2中的同一个类的两个根组件上调用Bootstrap（）？

0 个答案: