Angular 角度6错误处理-如何在模式中显示错误？

我试图在一个模态对话框中显示错误，但我完全是一个角度新手，我被卡住了

该项目已使用引导，因此我尝试使用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（但如果我让它起作用，我会处理这个问题）

根据文档（）“[用于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, 

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

{ariaLabelledBy:'modal basic title'，居中：true，大小：'lg'，windowClass:'newUserModalClass}）； } }

错误显示.component.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, 

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

错误显示.component.html

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

错误显示工作！

我几天前遇到了这个问题，我找到了一个解决方案，所以如果有人遇到这个问题，您可以尝试解决它，在运行时注入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，但我有相同的错误，似乎NgbModal的_modalStack:NgbModalStack属性得到了未定义的值，所以当我在运行时注入时，服务被定义了

我希望这能帮助遇到这个问题的人

您可以阅读下一篇文档，以更好地理解NgbModal的功能性和NgbModal的类组成

---

亲切的问候，

向我们展示您的完整代码它不起作用。handleError方法中的“this.injector”本身也未定义。