如何通过 Angular-Service 显示 bootstrap 模态

Question

我有一个全局错误处理程序，我在其中处理客户端和服务器错误。

为了向用户提供反馈，我想打开一个模式，其中 returns 错误消息。

因此我实现了一个模态：

import {Component} from '@angular/core';
import {BsModalRef, BsModalService} from 'ngx-bootstrap';
import {Button} from '../../layout-models/button.model';

@Component({
  selector: 'error-modal',
  templateUrl: './error-modal.component.html',
  styleUrls: ['./error-modal.component.scss']
})
export class ErrorModalComponent {
  title: string;
  buttonTitle = 'OK';
  type: 'error';
  button: Button;

  protected modalRef: BsModalRef;

  constructor(protected modalService: BsModalService) {}

  public show(title: string, message: string) {
    this.title = title;
    this.modalRef = this.modalService.show(
      message,
      Object.assign({}, { class: `modal-banner ${this.type}`})
    );
  }

  hide() {
    if (this.modalRef) {
      this.modalRef.hide();
    }
  }
}

在我的通知服务中：

import {Injectable, NgZone} from '@angular/core';
import { ErrorModalComponent } from '../error-modal.component';

@Injectable({
  providedIn: 'root'
})
export class NotificationService {

  public errorModalComponent: ErrorModalComponent;

  showError(title: string, message: string): void {
     this.errorModalComponent.show(title, message);
  }
}

这导致 Uncaught TypeError: Cannot read property 'show' of undefined

我觉得我犯了一些根本性的错误——这样做的主要目的是要有一个集中式模式。这是可能的还是我需要在我想显示错误处理模态的每个组件中使用 ModalComponent？

Answer 1

我不会使用 ngx-modal 我会使用 NgbModal

yazantahhan 的意思是这样的：

import {Injectable} from "@angular/core";
import {NgbModal, NgbModalRef} from "@ng-bootstrap/ng-bootstrap";

@Injectable()
export class ErrorModalService {

  title: string;
  buttonTitle = "OK";
  type: "error";

  protected modalRef: NgbModalRef;

  constructor(protected modalService: NgbModal) {}

  public show(title: string, message: string) {
    this.title = title;
    this.modalRef = this.modalService.open(
      message
    );
  }

  hide() {
    if (this.modalRef) {
      this.modalRef.close();
    }
  }
}

然后像这样注入和使用它：

import { Component } from "@angular/core";
import {ErrorModalService} from "./ErrorModalService";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  title = "testAngular";

  constructor(
    private errorModalService: ErrorModalService,
  ) {}


  showError() {
    this.errorModalService.show("title", "message");
  }
}

不要忘记在您的模块中提供服务

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import {ErrorModalService} from "./ErrorModalService";
import {BsModalService} from "ngx-bootstrap/modal";
import {NgbModule} from "@ng-bootstrap/ng-bootstrap";

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,
  ],
  providers: [
    ErrorModalService,
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

如何通过 Angular-Service 显示 bootstrap 模态

How to show a bootstrap modal via an Angular-Service

javascript

error-handling

modal-dialog

inject

angular