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

Question

我有两个按钮，分别为Image和Text 。 基于这些按钮的单击，我想向dom中动态添加一个元素，即TextArea或ImageArea。

因为我的HTML代码很长，所以我不能使用nativeElement.append（var）;

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

Answer 1

正确的答案取决于应用程序的体系结构以及您的实际需求。 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>