Angular PrimeNG提供了一个名为p-dialog的组件，可以用来实现图片预览功能。

首先，在你的Angular项目中安装PrimeNG和PrimeIcons：

npm install primeng primeicons --save

在你的app.module.ts中引入p-dialog模块：

import { DialogModule } from 'primeng/dialog';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    DialogModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在你的组件中定义一个p-dialog，用来展示图片预览：

在你的组件中，定义一个变量selectedImage和显示p-dialog的标志变量displayDialog，当用户点击图片时，设置selectedImage为当前图片的URL，并把displayDialog设置为true，这样p-dialog就会显示。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  

    

      
    
  
  
    
  
  `
})
export class AppComponent {
  images = [
    'https://picsum.photos/400/300?image=1',
    'https://picsum.photos/400/300?image=2',
    'https://picsum.photos/400/300?image=3',
    'https://picsum.photos/400/300?image=4',
    'https://picsum.photos/400/300?image=5',
    'https://picsum.photos/400/300?image=6',
    'https://picsum.photos/400/300?image=7',
    'https://picsum.photos/400/300?image=8',
    'https://picsum.photos/400/300?image=9',
    'https://picsum.photos/400/300?image=10'
  ];

  selectedImage: string;
  displayDialog = false;

  viewImage(image: string) {
    this.selectedImage = image;
    this.displayDialog = true;
  }
}

这样，当用户点击一张图片时，p-dialog会显示被选中的图片。 免责声明：本文内容通过AI工具匹配关键字智能整合而成，仅供参考，火山引擎不对内容的真实、准确或完整作任何形式的承诺。如有任何问题或意见，您可以通过联系service@volcengine.com进行反馈，火山引擎收到您的反馈后将及时答复和处理。