Angular 6 错误处理 - 如何在模态中显示错误？

Question

我试图在模态对话框中显示错误，但我是一个完整的 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 参数不满意。

即使这样有效，我也不知道如何将错误变量传递给 ErrorDisplayComponent（但如果我让它工作，我会处理这个问题）。

根据文档（https://ng-bootstrap.github.io/#/components/modal/api）“内容 [用于 open() 方法] 可以作为 TemplateRef 或组件类型提供。”

也许我应该尝试使用 TemplateRef 选项（但我不知道如何即时创建 TemplateRef），或者这种方法是错误的，我应该做其他事情。但由于我什至不知道行话，谷歌搜索答案并不容易。

有任何想法吗？

提前致谢！

更新：完整代码

错误处理程序.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, size: 'lg', windowClass : "newUserModalClass" }); } }

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

错误-display.component.html

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

Answer 1

几天前我遇到了这个问题，我找到了一个解决方案，所以如果有人遇到这个问题，你可以做的尝试解决它是在运行时注入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 功能和类组合

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

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

亲切的问候，