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);
  }

}

SiteDesignerComponent的HTML

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

RowComponent的HTML

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

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

如果我添加两行：第一行有一列，第二行有三列，然后如果我删除第一行，它会保留错误的列（在第二行创建）。我知道我在处理对象数组的方式有问题，但我仍然无法弄明白。

感谢您的帮助！

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();
  }
}

谢谢大家的帮助！

Angular2 - 获取动态创建的元素

1 个答案: