动态创建TemplateRef

时间:2017-02-21 10:40:41

标签: angular

我正在尝试创建一个动态创建其他组件网格的组件。我正在使用渲染器来创建div元素。

我正在努力将组件放在正确的位置,因为 ViewContainerRef createComponent方法总是自己创建元素。

我还尝试直接调用 ComponentFactory 的create方法,但我不知道在哪里添加组件实例。

for (let y = 0; y < this.rows; y++) {
  const row: Element = this._renderer.createElement(this._container.element.nativeElement, 'div');
  row.classList.add('row');
  for (let x = 0; x < this.cols; x++) {
    const col = this._renderer.createElement(row, 'div');
    col.classList.add('col-lg-1', 'col-md-1', 'col-xl-1');

    // const template = this._renderer.createTemplateAnchor(col);
    // const view = this._container.createEmbeddedView(template);
    if (configuration !== null) {
      const factory = this._resolver.resolveComponentFactory(component);
      const comp = factory.create(this._container.injector);
      // method not available
      // template.insert(comp.hostView);
      // view.createComponent(factory, 0, this._container.parentInjector, []);
      // Adds component directly to the container
      // this._container.createComponent(factory, 0, this._container.parentInjector, []);
    }
  }
}

是否可以直接执行此操作f.e.创建 TemplateRef 实例或者我需要另一个指令/组件来实现这样的事情吗?

0 个答案:

没有答案