Angular NGX 引导模式 - 缺少内容

Question

This is a follow-up of this question: How to show a bootstrap modal via an angular service

My modal is now showing but there is no content to it.

The structure of the modal is how I intented it to be, the backdrop is shown aswell but there is no content to it.

Here is my code:

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

The BsModalService is provided in my Global-Modul.

Finally the Modal is called in my Errorhandler like this.

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

I've tried it with a seperated Service, but the results are the same - what am I missing here?

Answer 1

This article and following the exact instructions helped me to solve the issue:

Using NGX Bootstrap-Modals seperate Component