Ionic弹出窗口 _Ionic弹出窗口

【Ionic弹出窗口】弹出窗口是出现在当前页面顶部的小覆盖层, 用于显示其他信息。你可以将其用于任何事物, 但通常用于导航栏中不适合的其他操作。它使我们能够非常轻松地呈现或收集来自用户的信息。通常在以下情况下使用。

它显示有关当前视图的其他信息。
你可以选择常用的工具和配置。
它提供了要在当前视图内执行的操作的列表。

弹出式控制器它负责在Ionic应用程序中创建弹出框。它使用create()方法创建弹出框。你可以通过在create方法中设置弹出选项来自定义控制器。
Present()方法
present()方法用于在弹出实例上显示弹出通知。需要在present()方法中传递click事件以定位弹出窗口。如果你未通过事件, 则弹出窗口将位于视图的中心。
让我们逐步了解如何将数据从页面传递到弹出框组件。
步骤1：创建一个新项目。你可以从此处了解如何在Ionic 4中创建项目。
步骤2：创建弹出式自定义组件。无需创建页面, 因为创建组件的目的是仅列出新消息的通知。为此, 请运行以下命令。

$ ionic g component notifications

步骤3：在创建通知组件之后, 打开以下文件, 并插入给定的代码。你可以根据需要更改代码。
notifications.component.scss

ion-list {& .list-ios {margin-bottom: 0; }}

notifications.component.html

< ion-list class="ion-no-margin ion-no-padding"> < ion-list-header color="dark" class="text-10"> < ion-label class="fw700"> Notifications< /ion-label> < /ion-list-header> < ion-item color="secondary" class="text-10"> < ion-icon name="mail" color="light"> < /ion-icon> < ion-label> New Offer 30% OFF< /ion-label> < /ion-item> < ion-item color="light" class="text-10"> < ion-icon name="mail-open" color="primary"> < /ion-icon> < ion-label> New Offer 15% OFF by month!< /ion-label> < /ion-item> < ion-item color="secondary" class="text-10"> < ion-icon name="mail" color="light"> < /ion-icon> < ion-label> New Offer 45% OFF< /ion-label> < /ion-item> < ion-item color="light" class="text-10"> < ion-icon name="mail-open" color="primary"> < /ion-icon> < ion-label> New Offer 25% OFF on Credit Card!< /ion-label> < /ion-item> < ion-item color="light" class="text-10"> < ion-icon name="mail-open" color="primary"> < /ion-icon> < ion-label> New Offer 20% OFF by month!< /ion-label> < /ion-item> < /ion-list>

步骤4：接下来, 在创建通知组件之后, 配置app.module.ts文件。在这里, 你需要导入通知组件, 然后将其添加到@NgModule中。

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouteReuseStrategy } from '@angular/router'; import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; import { SplashScreen } from '@ionic-native/splash-screen/ngx'; import { StatusBar } from '@ionic-native/status-bar/ngx'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; import { NotificationsComponent } from './notifications/notifications.component'; @NgModule({declarations: [AppComponent, NotificationsComponent], entryComponents: [NotificationsComponent], imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule], providers: [StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }], bootstrap: [AppComponent]})export class AppModule {}

步骤5：打开home.page.ts文件并添加以下代码。在此文件中, 我们可以将数据从主页传递到弹出框组件。

import { Component } from '@angular/core'; import { PopoverController } from '@ionic/angular'; import { NotificationsComponent } from '../notifications/notifications.component'; @Component({selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], })export class HomePage {constructor(public popoverCtrl: PopoverController) { }async notifications(ev: any) {const popover = await this.popoverCtrl.create({component: NotificationsComponent, event: ev, animated: true, showBackdrop: true}); return await popover.present(); }}

步骤6：打开home.page.html文件, 并添加以下代码。

< ion-header translucent> < ion-toolbar color="danger"> < ion-title> Ionic Popover< /ion-title> < /ion-toolbar> < /ion-header> < ion-content class="ion-padding" color="light"> < h1> Popover Notification< /h1> < ion-button size="small" shape="round" color="primary" (click)="notifications()"> < ion-icon name="notifications"> < /ion-icon> Show< ion-badge color="dark" slot="end"> 2< /ion-badge> < /ion-button> < /ion-content>

步骤7：现在, 运行应用程序, 你将获得以下屏幕。