Angular2 - 获取动态创建的元素

Question

我使用Angular2动态元素创建实验的保持和我使用有以下代码渲染：

组件

export class DesignerComponent { 
    @ViewChild('builder') builder:ElementRef; 

    renderer: Renderer; 

    constructor(private elementRef: ElementRef, private rend: Renderer) 
    { 
    this.renderer = rend; 
    } 


    ngAfterViewInit() { 

    } 


    addRow() { 
    this.renderer.createElement(this.builder.nativeElement,'div'); 

    console.log(
     `* ${this.builder.nativeElement.innerHTML}`); 
    } 

} 

HTML：

<div #builder class="row"> 
</div> 
<a class="btn-floating btn-large waves-effect waves-light red" (click)="addRow()"><i class="material-icons">add</i></a> 

'div'被创建成功，但我的问题是：如何获得动态创建的'div'？

我想获得它的参考，所以我也可以创建它的孩子。例如：这个div是一行，然后我想添加列。

非常感谢您的帮助！

更新1

我原来的代码是这样的一个

组件：

import { Component, ViewChild, ElementRef, Renderer} from '@angular/core'; 


@Component({ 
    selector: 'c3', 
    template: `<h2>c3</h2>` 

}) 
export class C3 { 
} 

@Component({ 
    moduleId: module.id, 
    selector: 'my-row', 
    templateUrl: 'row.component.html', 
    styles: [ 
    `.row:hover { 
     border: 3px dashed #880e4f ; 
     } 
    ` 
    ] 
}) 

export class RowComponent { 

    colIndex: number = 0; 
    colList: Object[] = []; 
    rowId: number; 

    addColumn() { 
    this.colList.splice(this.colIndex, 0, ColumnComponent); 
    this.colIndex++; 
    } 

    removeColumn(colIdx: number) { 
    this.colList.splice(colIdx, 1); 
    } 

    setRowId(rowId: number) { 
    this.rowId = rowId; 
    } 
} 

@Component({ 
    moduleId: module.id, 
    selector: 'my-column', 
    templateUrl: 'column.component.html', 
    styles: [ 
    `.col:hover { 
     border: 3px solid #304ffe; 
     } 
    ` 
    ] 
}) 

export class ColumnComponent { 
    row: RowComponent; 

    constructor(row: RowComponent) { 
    this.row = row; 
    } 

    removeColumn(colIdx: number) { 
    this.row.colList.splice(colIdx, 1); 
    } 

} 


@Component({ 
    moduleId: module.id, 
    selector: 'my-site-designer', 
    templateUrl: 'sitedesigner.component.html', 
    styles: [` 
     nav { 
      height: 0px; 
     } 
     .side-nav { 
      width: 250px; 
      margin-top: 63px; 
     } 
     li.active { 
     color: #FFFFFF; 
     background-color: #1A237E; 
     } 
     li.active > a { 
     color: #FFFFFF; 
     background-color: #1A237E; 
     } 
     li.active > a > i{ 
     color: #FFFFFF; 
     background-color: #1A237E; 
     } 

     /* 
     li.active i { 
     color: #FFFFFF; 
     background-color: #1A237E; 
     }    
     */ 
    `], 
    //template: `<p> teste teste</p>` 
}) 

export class SiteDesignerComponent { 
    @ViewChild('builder') builder:ElementRef; 

    elementIndex: number = 0; 
    colIndex: number = 0; 

    list: Object[] = []; 
    colList: Object[] = []; 

    ngAfterViewInit() { 

    } 

    addRow() { 
    this.list.splice(this.elementIndex, 0, RowComponent); 

    this.elementIndex++; 

    } 

    remove(idx: number) { 
    this.list.splice(idx, 1); 
    } 

} 

HTML的SiteDesignerComponent

<div #builder class="row"> 
    <div class="s1 teal lighten-2"> 
    <p class="flow-text">teste do html builder</p> 

    <div *ngFor="let row of list; let idx = index" > 
     <p class="flow-text">Linha {{idx}}</p> 
     <dcl-wrapper [type]="row"></dcl-wrapper> 

     <a class="btn-floating btn-small waves-effect waves-light purple" (click)="remove(idx)"><i class="material-icons">remove</i></a> 
    </div> 

    </div> 

</div> 
<a class="btn-floating btn-large waves-effect waves-light red" (click)="addRow()"><i class="material-icons">add</i></a> 

HTML的RowComponent

<div #row class="row" id="{{rowId}}"> 
    <div class="s12 teal lighten-2"> 
    <p class="flow-text">adding a row </p> 
    </div> 
    <div id="colunas" *ngFor="let col of colList; let colIndex = index"> 
    <dcl-wrapper [type]="col"></dcl-wrapper> 
    <!--a class="btn-floating btn-small waves-effect waves-light deep-orange lighten-3" (click)="removeColumn(colIndex)"><i class="material-icons">remove</i></a--> 
    </div> 
    <a class="btn-floating btn-small waves-effect waves-light waves-teal" (click)="addColumn()"><i class="material-icons">view_column</i></a> 
</div> 

为ColumnComponent

<div class="col s4 purple lighten-2"> 
    <p class="flow-text">adicionando coluna ....</p> 
    <a class="btn-floating btn-small waves-effect waves-light deep-orange lighten-3" (click)="removeColumn(colIndex)"><i class="material-icons">remove</i></a> 
</div> 

HTML如果我添加两行：第一个栏和第二，三列，然后如果我删除第一行，它使错误的列（创建在第二行）。我知道我正在处理对象数组的方式有些问题，但我仍然无法弄清楚。

感谢您的帮助！

Answer 1

把它解决了。

为RowCompnent更新HTML：

<div #row class="row" id="{{rowId}}"> 
    <div class="s12 teal lighten-2"> 
    <p class="flow-text">adicionando linha no html builder</p> 
    </div> 
    <div id="colunas" *ngFor="let col of colList; let colIndex = index"> 
    <dcl-wrapper [type]="col"></dcl-wrapper> 
    <!--a class="btn-floating btn-small waves-effect waves-light deep-orange lighten-3" (click)="removeColumn(colIndex)"><i class="material-icons">remove</i></a--> 
    </div> 
    <a class="btn-floating btn-small waves-effect waves-light purple" (click)="removeRow()"><i class="material-icons">remove</i></a> 
    <a class="btn-floating btn-small waves-effect waves-light waves-teal" (click)="addColumn()"><i class="material-icons">view_column</i></a> 
</div> 

更新RowComponent

export class RowComponent { 

    colIndex: number = 0; 
    colList: Object[] = []; 
    rowId: number; 

    selfRef: ElementRef; 
    selfRend: Renderer; 

    constructor(selfRef: ElementRef, selfRend: Renderer) { 
    this.selfRef = selfRef; 
    this.selfRend = selfRend; 
    } 

    addColumn() { 
    this.colList.splice(this.colIndex, 0, ColumnComponent); 
    this.colIndex++; 
    } 

    removeColumn(colIdx: number) { 
    this.colList.splice(colIdx, 1); 
    } 

    removeRow() { 
    this.selfRef.nativeElement.remove(); 
    } 
} 

谢谢大家的帮助！