मेरे पास एक वैश्विक एररहैंडलर है जिसमें मैं क्लाइंट- और सर्वर-त्रुटियों को संसाधित करता हूं।

उपयोगकर्ता के लिए एक प्रतिक्रिया प्रदान करने के लिए मैं एक मोडल खोलना चाहता हूं जो त्रुटि-संदेश देता है।

इसलिए मैंने एक मोडल लागू किया है:

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

जिससे होता है <कोड> ध्यान में न आया लेखन त्रुटि: अपरिभाषित की संपत्ति 'शो' पढ़ा नहीं जा सकता

मुझे ऐसा लग रहा है कि मैं कोई मौलिक गलती कर रहा हूं - इसका मुख्य उद्देश्य एक केंद्रीकृत मोडल बनाना है। क्या यह संभव है या क्या मुझे प्रत्येक घटक में ModalComponent का उपयोग करने की आवश्यकता है जिसमें मैं त्रुटि-हैंडलिंग-मोडल दिखाना चाहता हूं?

0
codlix 30 अक्टूबर 2019, 17:25

1 उत्तर

सबसे बढ़िया उत्तर

मैं एनजीएक्स-मोडल का उपयोग नहीं करूंगा मैं NgbModal का उपयोग करूंगा

यज़ंतहं का अर्थ कुछ इस प्रकार है:

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 { }
1
ParrapbanzZ 30 अक्टूबर 2019, 15:36