Question

首先，Plunker中提供了所有代码。

一些代码

我有一个根Angular2组件，如下所示：

import {Component} from '@angular/core'

@Component({
  selector: 'my-app',
  template: `
    <h2>Angular2 Root Component</h2>
    <div data-dynamic-content></div>
  `,
})
export class App {}

[data-dynamic-content]元素是我将在运行时添加的组件的占位符。这些组件也是动态的，如下所示：

import {Component} from '@angular/core'

export function createComponent(selector: string, value: string) {
  @Component({
    selector: selector, 
    template: `<h4>Dynamic Component: {{v}}</h4>`,
  })
  class MyDynamicComponent {
    v = value;
  }

  return MyDynamicComponent;
};

请注意，这是非常简化的示例。

问题陈述

我想创建MyDynamicComponent的不同表示形式，将它们附加到[data-dynamic-content]元素树的某个位置，并让它们完全正常运行。

我尝试了什么

到目前为止唯一有效的方法是在追加到DOM时引导新创建的组件：

import {bootstrap} from '@angular/platform-browser-dynamic';
import {createComponent} from './my-dynamic.component';

export function addComponentDynamically(selector, value) {
  var dynamicComponent = createComponent(selector, value);

  var container = document.querySelector('[data-dynamic-content]');
  var wrapper = document.createElement("div");
  wrapper.innerHTML = `<${selector}></${selector}>`;
  container.appendChild(wrapper);

  // !! won't work without this line
  bootstrap(dynamicComponent);
};

我也玩过DynamicComponentLoader。它看起来不符合我的需求 - DynamicComponentLoader.loadNextToLocation需要一个ViewContainerRef参数（例如，您应事先知道您的组件所在的位置），而且我没有这个。正如我之前提到的，MyDynamicComponent可以在[data-dynamic-content]元素树中的任何地方呈现，而不一定在此元素本身中。

结论

虽然这有效，但我非常怀疑这种方法是否具有可扩展性（在Chrome中测试了1000个更复杂的组件 - 内存消耗达到峰值750 MB左右，然后降低到约400 MB）。

有没有比一次又一次地调用bootstrap更好的方法来完成这项工作？

Angular 2：如何在追加到DOM

一些代码

问题陈述

我尝试了什么

结论

0 个答案: