如何动态加载自定义组件到div？角度2

Question

ANGULAR2, 我想将我所有的自定义组件加载到基于 customComponentsList 的 html div 中。

我的实际情况是considor我有

A(0-row,0-column),B(0,1),C(0,2),D(1,0),E(1,1),F(2,0), G(2,1), H(2-row,2-column))

自定义组件。

我必须根据行和列位置显示在 div 中，例如

    A B C
    D E
    F G H

Answer 1

这可能有用

<div #target x="0" y="0"></div>
<div #target x="1" y="0"></div>
<div #target x="2" y="0"></div>

<div #target x="0" y="1"></div>
<div #target x="1" y="1"></div>
<div #target x="2" y="1"></div>

<div #target x="0" y="2"></div>
<div #target x="1" y="2"></div>
<div #target x="2" y="2"></div>

@ViewChildren('target', {read: ViewContainerRef}) targets: QueryList<ViewContainerRef>;

// this.targets is not filled before `ngAfterViewInit()` was called
addComponent(x, y) {
  let t = this.targets(y * 3 + x); 
}

如何动态加载自定义组件到div？角度2

How to load custom components dynamically to div? Angular2

html

css

angular2-forms

angular