Angular 6 Обработка ошибок - как отобразить ошибку в модальном режиме? - PullRequest
Новая
       11

Angular 6 Обработка ошибок - как отобразить ошибку в модальном режиме?

0 голосов
/ 04 декабря 2018

Я пытаюсь отобразить ошибки в модальном диалоговом окне, но я новичок в Angular и застрял.

В проекте уже используется начальная загрузка, поэтому я попытался использовать NgbModal: 

    // in ErrorHandler

    handleError(error: Error) {

    //do other stuff

    console.error(error);

    this.modalService.open(ErrorDisplayComponent, //problems here
          {
          //modal options
          });
    }

Это приводит к ошибке: 

Uncaught TypeError: Cannot read property 'open' of undefined
at NgbModal.push../node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js.NgbModal.open

Кажется, что метод open недоволен параметром ErrorDisplayComponent.

Даже если это сработало, я не знаюкак передать переменную error в ErrorDisplayComponent (но я справлюсь с этим, если я заставлю это работать).

Согласно документации (https://ng -bootstrap.github.io / # /components / modal / api ) «Содержимое [для метода open ()] может быть предоставлено как TemplateRef или тип компонента.»

Возможно, мне следует попробовать с параметром TemplateRef (но у меня нетидея, как создать TemplateRef на лету) или , возможно, этот подход неправильный, и я должен делать что-то еще .Но поскольку я даже не знаю жаргона, поиск ответа не так прост.

Есть идеи?

Заранее спасибо!

ОБНОВЛЕНИЕ:Полный код

ErrorsHandler.ts 

    import { ErrorHandler, Injectable, Injector} from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ErrorDisplayComponent } from './errors/error-display/error-display.component';

@Injectable()
export class ErrorsHandler implements ErrorHandler {

    constructor(private modalService: NgbModal) {

    }

    handleError(error: Error) {
        //console.error(error);
        this.modalService.open(ErrorDisplayComponent,

{ariaLabelledBy: 'modal-basic-title', по центру: true, размер: 'lg',windowClass: "newUserModalClass"});}}

error-display.component.ts 

    import { Component, OnInit } from '@angular/core';
import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";

@Component({
  selector: 'app-error-display',
  templateUrl: './error-display.component.html',
  styleUrls: ['./error-display.component.scss']
})
export class ErrorDisplayComponent implements OnInit {

  constructor(public activeModal: NgbActiveModal) {
  }

  ngOnInit() {
  }

  onClose():void {
    this.activeModal.close('closed');
  }



      onDismiss(reason : String):void {
        this.activeModal.dismiss(reason);
      }
    }

error-display.component.html 

<ng-template #content let-modal>
  <h1>error-display works!</h1>
</ng-template>

1 Ответ

0 голосов
/ 18 января 2019

У меня была эта проблема несколько дней назад, я нашел решение, поэтому, если кто-то столкнется с этой проблемой, вы можете попытаться решить ее, вставив modalService: NgbModal во время выполнения ввместо использования конструктора.В этом конкретном случае внедрение может быть реализовано следующим образом: 

import { ErrorHandler, Injectable, Injector} from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ErrorDisplayComponent } from './errors/error-display/error- 
display.component';

@Injectable()
export class ErrorsHandler implements ErrorHandler {

    private modalService: NgbModal

    constructor(private injector: Injector) {

    }

    handleError(error: Error) {
        this.modalService = this.injector.get(NgbModal);

        //console.error(error);
        this.modalService.open(ErrorDisplayComponent, 
       ...

В моем случае я вызывал modalService из другого сервиса, но у меня была та же ошибка, кажется, что свойство _modalStack: NgbModalStack изNgbModal получал неопределенное значение, поэтому, когда я вводил во время выполнения, служба была определена.

Я надеюсь, что это может помочь кому-то столкнуться с этой проблемой.

Вы можете прочитать следующую документацию, чтобы лучше понять NgbModalфункциональность и состав класса для NgbModal

https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/modal/modal.ts

https://ng -bootstrap.github.io / # / components / modal / examples

С уважением,

...