Как показать мод загрузки с помощью Angular-Service - PullRequest
Новая
       43

Как показать мод загрузки с помощью Angular-Service

0 голосов
/ 30 октября 2019

У меня есть глобальный обработчик ошибок, в котором я обрабатываю ошибки клиента и сервера.

Чтобы предоставить пользователю обратную связь, я хочу открыть модальное окно, которое возвращает сообщение об ошибке.

Поэтому я применил модальный режим: 

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 в каждом Компоненте, в котором я хочу показать модал обработки ошибок?

1 Ответ

1 голос
/ 30 октября 2019

Я бы не использовал ngx-модал Я бы использовал 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 { }
...