这是该问题的后续内容: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);
}
}
我已经尝试过使用单独的服务,但是结果是一样的-我在这里错过了什么?