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는 행이며 그 다음에 열을 추가하고 싶습니다.

도움 주셔서 대단히 감사합니다.

업데이트 한 내 원래의 코드는 하나의

구성 요소입니다

다음 RowComponent

에 대한 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에 대한

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 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> 

에 대한는

<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> 

HTML 나는 두 행을 추가하는 경우 : 생성 (하나 개의 컬럼에 처음 세 열 두 번째와 내가 첫 번째 행을 제거하면 다음, 그것은 잘못된 열을 유지 두 번째 행에 있음). 객체 배열을 작업하는 방식에 문제가 있다는 것을 알고 있지만 여전히 이해할 수는 없습니다.

도움 주셔서 감사합니다.

Answer 1

해결되었습니다. RowCompnent에 대한

업데이트 HTML : 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(); 
    } 
} 

업데이트

<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> 

는 도움에 대해 감사합니다!