如何通过Angular-Service显示引导模态 [英] How to show a bootstrap modal via an Angular-Service

问题描述

我有一个全局的Errorhandler，用于处理客户端错误和服务器错误.

I have a global Errorhandler in which I process Client- and Server-Errors.

要向用户提供反馈，我想打开一个返回错误消息的模式.

To provide a feedback for the user I want to open a modal which returns the error-message.

因此，我实现了一个模式:

Therefore I've implemented a modal:

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();
    }
  }
}

在我的Notification-Service中:

In my Notification-Service:

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

Which leads to Uncaught TypeError: Cannot read property 'show' of undefined

我感觉自己在犯一些根本性的错误-这样做的主要目的是拥有一个集中的模式.这可能吗?或者我需要在每个要显示错误处理模式的组件中使用ModalComponent吗?

I feel like I am doing some fundamental mistake - the main purpose of this is to have a centralized modal. Is this possible or do I need to use the ModalComponent in every Component in which I want to show the error-handling-modal?

推荐答案

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

I wouldn't use ngx-modal I would use NgbModal

yazantahhan的意思是这样的:

What yazantahhan means is something like this:

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();
    }
  }
}

然后像这样注入并使用它:

Then inject and use it like this:

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");
  }
}

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

Don't forget to provide the service in your module

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显示引导模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！