javascript - 如何通过 Angular-Service 显示引导模式
问题描述
我有一个全局错误处理程序,我在其中处理客户端错误和服务器错误。
为了向用户提供反馈,我想打开一个返回错误消息的模式。
因此我实现了一个模式:
import {Component} from '@angular/core';
import {BsModalRef, BsModalService} from 'ngx-bootstrap';
import {Button} from '../../layout-models/button.model';
@Component({
selector: 'error-modal',
templateUrl: './error-modal.component.html',
styleUrls: ['./error-modal.component.scss']
})
export class ErrorModalComponent {
title: string;
buttonTitle = 'OK';
type: 'error';
button: Button;
protected modalRef: BsModalRef;
constructor(protected modalService: BsModalService) {}
public show(title: string, message: string) {
this.title = title;
this.modalRef = this.modalService.show(
message,
Object.assign({}, { class: `modal-banner ${this.type}`})
);
}
hide() {
if (this.modalRef) {
this.modalRef.hide();
}
}
}
在我的通知服务中:
import {Injectable, NgZone} from '@angular/core';
import { ErrorModalComponent } from '../error-modal.component';
@Injectable({
providedIn: 'root'
})
export class NotificationService {
public errorModalComponent: ErrorModalComponent;
showError(title: string, message: string): void {
this.errorModalComponent.show(title, message);
}
}
这导致
Uncaught TypeError: Cannot read property 'show' of undefined
我觉得我犯了一些根本性的错误——这样做的主要目的是建立一个集中的模式。这是可能的,还是我需要在要显示错误处理模式的每个组件中使用 ModalComponent?
解决方案
我不会使用 ngx-modal 我会使用NgbModal
yazantahhan 的意思是这样的:
import {Injectable} from "@angular/core";
import {NgbModal, NgbModalRef} from "@ng-bootstrap/ng-bootstrap";
@Injectable()
export class ErrorModalService {
title: string;
buttonTitle = "OK";
type: "error";
protected modalRef: NgbModalRef;
constructor(protected modalService: NgbModal) {}
public show(title: string, message: string) {
this.title = title;
this.modalRef = this.modalService.open(
message
);
}
hide() {
if (this.modalRef) {
this.modalRef.close();
}
}
}
import { Component } from "@angular/core";
import {ErrorModalService} from "./ErrorModalService";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"]
})
export class AppComponent {
title = "testAngular";
constructor(
private errorModalService: ErrorModalService,
) {}
showError() {
this.errorModalService.show("title", "message");
}
}
不要忘记在你的模块中提供服务
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import {ErrorModalService} from "./ErrorModalService";
import {BsModalService} from "ngx-bootstrap/modal";
import {NgbModule} from "@ng-bootstrap/ng-bootstrap";
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
NgbModule,
],
providers: [
ErrorModalService,
],
bootstrap: [AppComponent],
})
export class AppModule { }
推荐阅读
- excel - 根据另一个选项卡中的匹配结果在单独的选项卡中创建报告
- java - 为什么我会收到“尝试在空对象引用上调用接口方法'int android.database.Cursor.getCount()'”?
- angular - 如何对角茉莉花进行单元测试
- javascript - APIFY 中的 scrapeAndClick 函数
- java - 我如何将对象传递给 Javafx 类以便程序化地创建 GUI?
- python - 如何查找字符串是否在数据框特定列的列表中?
- java - Spring Boot - JPA 或 SQL 查询在连接表中查找最常见的项目?
- python - OSError:[Errno 22] 简单服务器类的无效参数错误
- python - 如何在 pytest 单元测试中比较 XGBoost 模型对象,一个初始化/拟合,另一个从文件中读取?
- javascript - chart.js 更新不是函数