Angular PrimeNG图像指示器模板制作

Angular PrimeNG是一个开源的Angular应用程序的UI组件库。使用Angular PrimeNG提供的组件，人们可以创建令人惊叹和响应的angular应用程序。在这篇文章中，我们将看到Angular PrimeNG图像指示器模板。

图像组件用于向用户展示一张具有预览和基本转换功能的图像。在预览模式下，当图像被用户悬停时，默认会显示一个眼睛图标。这一行为可以通过使用指标模板来改变，在这里我们可以定义自定义内容。

Angular PrimeNG图像指示器模板：

indicator：指示器模板用于定制叠加内容，当我们将鼠标悬停在启用了预览功能的图片上时，该内容是可见的。

语法:

<p-image 
    src="..."
    [preview]="..." 
    alt="...">

    <ng-template pTemplate="indicator">
        ...
    </ng-template>
</p-image>

创建Angular应用程序并安装模块：

第1步：使用以下命令创建一个Angular应用程序。

ng new myapp

第2步 。在创建你的项目文件夹即myapp后，使用以下命令移动到它。

cd myapp

第3步在你给定的目录中安装PrimeNG。

npm install primeng --save
npm install primeicons --save

项目结构：完成上述步骤后，其结构将如下所示。

Angular PrimeNG图像指示器模板制作

Project Structure

实例1：这是图像指标模板的基本实例。这里，默认的眼睛图标被替换为 “pi-box “图标。

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Image Indicator Templating</h3>
  
<p-image 
    src="https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png"
    [preview]="true" 
    alt="logo">
  
    <ng-template pTemplate="indicator">
        <i 
            class="pi pi-box" 
            style="font-size: 24px;">
        </i>
    </ng-template>
</p-image>

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
  
export class AppComponent { }

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { ImageModule } from 'primeng/image';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ImageModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG图像指示器模板制作

实例2：这是指标模板化的另一个例子。在这里，我们在指标模板上添加了一个图标和一个段落。

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Image Indicator Templating</h3>
  
<p-image 
    src="https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png"
    [preview]="true" 
    alt="logo">
  
    <ng-template pTemplate="indicator">
        <i class="pi pi-external-link mr-2"></i>
        <div><p>Preview Image</p></div>
    </ng-template>
</p-image>

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
  
export class AppComponent { }

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { ImageModule } from 'primeng/image';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ImageModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG图像指示器模板制作