Вызов Bootstrap() для двух корневых компонентов одного и того же класса в Angular2?
Я обнаружил, что при вызове 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]
Как я могу получить два корневых компонента одного и того же класса, чтобы играть хорошо?