根据Angular中的单击动态添加dom元素

时间:2018-10-22 08:00:35

标签: javascript html angular html5 dom

我有两个按钮,分别是图片文本。基于这些按钮的点击,我想向dom中动态添加一个元素,即TextArea或ImageArea。

由于我的HTML代码很长,因此我无法使用nativeElement.append(var);

现在应该使用哪种方法将元素动态地动态添加到dom。

1 个答案:

答案 0 :(得分:0)

正确的答案取决于应用程序的体系结构以及您的实际需求。 Angular提供了许多向DOM添加元素的方法。解决问题的最简单方法是使用*ngIf,例如:

// component.ts

showImage: boolean = false;

// component.html

<img src="img.jpg" *ngIf="showImage">
<button (click)="showImage=true">Show image</button>

如果要向DOM中添加多个元素,则可以使用*ngFor

// component.ts

images: any[] = [];

addImage() {
  this.images.push(this.images.length+1);
}

removeImage() {
  this.images.pop();
}

// component.html

<img src="img.jpg" *ngFor="let img of images">
<button (click)="addImage()">Show an image more</button>
<button (click)="removeImage()">Show an image less</button>

编辑:

// component.ts

imagesAndTextarea: string[] = [];

addImg() {
  this.imagesAndTextarea.push('img');
}

addTextarea() {
  if (this.iamgesAndTexarea.filter(x => x === 'textarea').length >= 12) return;
  this.imagesAndTextarea.push('textarea');
}

// template.html

<ng-container *ngFor="let el of imagesAndTextarea">
  <textarea .... *ngIf="el === 'textarea'">
  <img .... *ngIf="el === 'img'">
</ng-container>