如何为整个应用程序编写一次离子警报组件？

Question

这是一道设计题。我（还）没有破坏代码。 ;-)

我有一个连接了多个模块的 ionic/angular 应用程序。在整个使用过程中，用户经常从 page-to-page/module 移动到模块。

我系统的另一部分将新元素放入 Firestore 数据库以响应外部事件。每当 Firestore 数据库中出现新条目时，我都想在屏幕上生成一条新消息，而不管当前向用户显示的是哪个 module/page..

根据我的研究，我似乎必须创建一个警报或弹出窗口或覆盖组件，然后将该组件包含在每个模块中并将其放置在每个模板文件中，以便显示消息。似乎没有办法编写一个覆盖组件，只要有适当的触发器，它就会将自己推到正在显示的任何其他内容上。

有没有办法在应用程序级别实现一次 overlay/alert/popover 而无需编写代码来处理每个模块中的潜在 overlay/popover/alert？

--保罗

Answer 1

可以将小吃店作为一项服务来使用。配置模态的样式，为模态传递数据（自定义消息等）。 https://material.angular.io/components/snack-bar/examples

MatSnackBar 是一个 angular 指令，专门用于在移动设备上显示通知栏。这些类型的 UI 组件通常会被多次使用。所以为了避免重复代码，可以简单地创建一个服务，在不同的组件中使用SnackBar。

要创建服务，您必须使用以下命令： ng g s 小吃吧现在从@angular/core 导入 MatSnackBar 并定义函数 openSnackBar（您始终可以使用不同的名称）。

服务

import { Injectable } from '@angular/core';
import {MatSnackBar} from '@angular/material/snack-bar';

@Injectable({
  providedIn: 'root'
})
export class SnackBarService {
  
//create an instance of MatSnackBar
  
  constructor(private snackBar:MatSnackBar) { }
  
/* It takes three parameters 
    1.the message string 
    2.the action 
    3.the duration, alignment, etc. */
  
  openSnackBar(message: string, action: string) {
    this.snackBar.open(message, action, {
       duration: 2000,
    });
  }
}

导入 snackBarService 并将其注入到要使用 Snackbar 的组件的构造函数中。这将创建一个服务实例，比如 snackBService。现在在 snackBService 的帮助下，在任何需要的地方调用 openSnackBar 函数。

组件

import { Component, OnInit } from '@angular/core';
import {SnackBarService} from '../snack.service';
  
  
@Component({
  selector: 'app-profile',
  templateUrl: './snackBar.html',
  styleUrls: ['./snackBar.css']
})
export class SnackBar {
  
  // create an instance of SnackBarService 
  
  constructor(private snackBService:SnackBarService) { }
  
  //defining method for display of SnackBar
  
  trigger(message:string, action:string)
  {
   this.snackBService.openSnackBar(message, action);
  }
  
}

通过重复这些步骤，我们可以在任何组件中使用 snackBar。示例：

<button (click)="trigger('This is a ', 'SnackBar')">
    SnackBarButton
</button>

如何为整个应用程序编写一次离子警报组件？

How do I write an ionic alert component once for the entire application?

alert

overlay

popover

ionic-framework

angular