Question

我有两个按钮，分别是图片和文本。基于这些按钮的点击，我想向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>

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

1 个答案: