Angular NGX 引导模式 - 缺少内容

Question

这是这个问题的后续： How to show a bootstrap modal via an angular service

我的模态现在正在显示，但没有内容。

模态的结构是我想要的，背景也显示出来了，但没有内容。

这是我的代码：

@Component({
  selector: 'error-banner',
  templateUrl: './error-banner.component.html',
  styleUrls: ['./error-banner.component.scss']
})
export class ErrorBannerComponent {
  title: string;
  buttonTitle = Title.Ok;
  message: string;
  type: 'warning';
  button: Button;
  @ViewChild('template', { static: false }) template;

  protected modalRef: BsModalRef;

  constructor(private modalService: BsModalService) {}

  public show(title: string, message: string) {
    const initialState = {
      title,
      message
    };
    this.modalRef = this.modalService.show(
      this.template,
      Object.assign({}, { initialState, class: `modal-banner ${this.type}`})
    );
    // out of despair
    this.title = title;
    this.message = message;
    this.modalRef.content = this.template;
    this.modalRef.setClass(`modal-banner ${this.type}`);
  }

  hide() {
    if (this.modalRef) {
      this.modalRef.hide();
    }
  }
}

BsModalService 在我的 Global-Modul 中提供。

最后，像这样在我的 Errorhandler 中调用 Modal。

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {

  errorBanner;

  constructor(private injector: Injector) {}

  handleError(error: Error | HttpErrorResponse) {

    const errorService = this.injector.get(ErrorService);
    const logger = this.injector.get(LoggingService);
    const modalService = this.injector.get(BsModalService);
    this.errorBanner = new ErrorBannerComponent(modalService);

    let message;
    let stackTrace;

    if (error instanceof HttpErrorResponse) {
      message = errorService.getServerMessage(error);
      stackTrace = errorService.getServerStack(error);
      this.errorBanner.show(Title.ServerError, message);
    } else {
      message = errorService.getClientMessage(error);
      stackTrace = errorService.getClientStack(error);
      this.errorBanner.show(Title.ClientError, message);
    }

    logger.logError(message, stackTrace);
  }
}

我已经尝试过使用单独的服务，但结果是一样的 - 我在这里错过了什么？

Answer 1

这篇文章并按照确切的说明帮助我解决了这个问题：

使用 NGX Bootstrap-Modals 单独的组件