angular - 更改图像 onclick 链接 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 中实现这一点，是否有一个很好的教程？

我的代码是错误的并且不起作用，所以感谢帮助。

标签： angularimageclick

Answer 1

绑定图像的 src 怎么样？就像是：

<img [src]="imageSource" >

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

在你的 ts 中：

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

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