Angular PrimeNG Inplace 事件

Angular PrimeNG是PrimeTek建立的一个UI组件库，用于帮助Angular开发者在更短的时间内开发出一致的、可扩展的Web界面。在这篇文章中，我们将看到Angular PrimeNG中的Inplace Events。

Inplace组件是用来代替其他组件的，当用户点击Inplace组件的输出时，实际的组件会被显示。Inplace的显示和内容可以通过display和content模板来指定。Inplace组件有两个事件，下面将介绍它们。

Angular PrimeNG Inplace Events：

onActivate。当内容被激活时，Inplace组件的这个事件被触发。
onDeactivate。当内容被激活时，Inplace组件的这个事件被触发。

Angular PrimeNG Inplace Events属性：

closable。该属性用于通过显示一个关闭按钮使原位内容可以关闭。

语法:

<p-inplace 
    (event)="callBack()">

    <ng-template pTemplate="display">
        ...
    </ng-template>
    <ng-template pTemplate="content">
        ...
    </ng-template>
</p-inplace>

创建应用程序并安装所需的模块：

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

ng new my_app

第2步：创建应用程序后，使用下面写的命令移动到项目文件夹。

cd new_app

第3步：最后，在你的项目目录中安装以下模块

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

项目结构：项目结构将如下图所示。

Angular PrimeNG Inplace Events

Project Structure

例子1：这个例子显示了使用Inplace的onActivate事件来显示一个祝酒词。

app.component.html

<div style="text-align:center">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>
        Angular PrimeNG Inplace Events
    </h4>
  
    <p-inplace (onActivate)="inplaceOnActivate()">
        <ng-template pTemplate="display">
            Click Here to Display Content
        </ng-template>
        <ng-template pTemplate="content">
            <button pButton type="button" 
                            label=
            "This is the Inplace Content">
            </button>
        </ng-template>
    </p-inplace>
</div>
<p-toast></p-toast>

app.component.ts

import { Component } from "@angular/core";
import { MessageService } from "primeng/api";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
    providers: [MessageService]
})
  
export class AppComponent {
    constructor(private mSer: MessageService) { }
    inplaceOnActivate() {
        this.mSer.add({
            severity: "success",
            summary: "Inplace Content is now Active",
            detail: "GeeksforGeeks"
        })
    }
}

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } 
    from "@angular/platform-browser";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ToastModule } from "primeng/toast";
import { InplaceModule } from "primeng/inplace";
import { ButtonModule } from "primeng/button";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        InplaceModule,
        ButtonModule,
        ToastModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG Inplace Events

例子2：在这个例子中，使用Inplace的onDeactivate事件来向用户显示敬酒信息。

app.component.html

<div style="text-align:center">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>
        Angular PrimeNG Inplace Events
    </h4>
  
    <p-inplace (onDeactivate)="inplaceOnDeactivate()" 
               [closable]="true">
        <ng-template pTemplate="display">
            Click Here to Display Content
        </ng-template>
        <ng-template pTemplate="content">
            <button pButton class="mr-4" 
                            type="button" 
                            label=
            "This is the Inplace Content">
            </button>
        </ng-template>
    </p-inplace>
</div>
<p-toast></p-toast>

app.component.ts

import { Component } from "@angular/core";
import { MessageService } from "primeng/api";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
    providers: [MessageService]
})
  
export class AppComponent {
    constructor(private mSer: MessageService) { }
    inplaceOnDeactivate() {
        this.mSer.add({
            severity: "error",
            summary: "Inplace Content is now Deactive",
            detail: "GeeksforGeeks"
        })
    }
}

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } 
    from "@angular/platform-browser";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ToastModule } from "primeng/toast";
import { InplaceModule } from "primeng/inplace";
import { ButtonModule } from "primeng/button";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        InplaceModule,
        ButtonModule,
        ToastModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG Inplace Events