更改图片 onclick a link Angular

Question

我希望有可能在图像中前进和后退，就像在相册中一样。我想要一个后退和前进按钮来实现 Angular。

<img
  id="AlbumImage1" " src="AlbumImage1.jpg" />
<img
  id="AlbumImage2" " src="AlbumImage2.jpg"  />
<img
  id="AlbumImage3" " src="AlbumImage2.jpg" />


<a>
<img
  id="forwardImage" (click)="changeAlbumImageForward()" src=".jpg" /></a>

.ts

changeAlbumImageForward(){
    (document.getElementById('AlbumImage') as HTMLImageElement).src = 'assets/AlbumImage1.png';
}

如何在Angular中实现这一点，有好的教程吗？

我的代码有误，无法运行，感谢帮助。

Answer 1

绑定图片的src怎么样？类似于：

<img [src]="imageSource" >

<img src="forwardImage" (click)="changeAlbumImageForward()">

在你的 ts 中：

imageSource: string = 'some/image/path';

changeAlbumchangeAlbumImageForward() {
   this.imageSource = 'some/new/image/path';
}

更改图片 onclick a link Angular

change images onclick a link Angular

image

click

angular