Question

我想滚动一个对象数组，并使用每个索引中的属性作为Angular2组件的输入参数Id喜欢添加到dom

这些组件是递归的，我需要在遍历这个对象数组的循环中使用dynamiccomponentloader函数（而不是* ngFor）

我正在寻找一个将组件的模板标记放在li里面的例子（在ul里面）。

我不确定loadAsRoot，loadIntoLocation或loadNextToLocation如何在ul中添加新的li而不是仅替换其先前的内容

我会非常感谢能够证明这一点。提前感谢您的帮助

Answer 1

Plunker example beta.17
Plunker example beta.9

import {Component, DynamicComponentLoader, ElementRef, Input} from 'angular2/core'

@Component({
  selector: 'dyn-cmp',
  template: `
  <h2>Dynamic {{name}}</h2>
`
})
export class DynCmp {
  @Input() name:string;
}

@Component({
  selector: 'my-app',
  directives: [],
  template: `
  <h2>Hello {{name}}</h2>
  <div #target></div>
`
})
export class App {
  list = ['a', 'b', 'c'];
  constructor(private dcl:DynamicComponentLoader, private elRef:ElementRef) {
    this.name = 'Angular2';
  }  

  ngAfterViewInit() {
    this.list.forEach((val) => {
      this.dcl.loadIntoLocation(DynCmp, this.elRef, 'target')
      .then(cmpRef => cmpRef.instance.name = val);
    });
  }
}

您无法使用loadAsRoot()，因为它会移除目标，而无法重复使用以添加其他组件。

Angular2：循环dynamiccomponentloader将数组中的每个对象推送到dom？

1 个答案: