Nav와 함께 서비스하는 이온 2/각도 2 경고

Question

나는 믿음을 넘어서 이것을 연구했다. 잘만되면 누군가 나를 도와 줄 수 있습니다.

내 응용 프로그램의 여러 섹션에 대한 기본 경고 서비스를 원하므로 내 페이지 전체에 동일한 경고 메시지를 계속 반복하지 않습니다.

경고 서비스를 설정했는데 알림을 표시 할 수 있지만 서비스에서 Nav에 액세스 할 수 없습니다.

경고 - service.ts

this.alert-service.networkError(); 

내가에 경보 productPage에서이 전화

networkError() { 

let alert = this.alertCtrl.create({ 
    title: 'Network Error', 
    message: 'There was a network error, are you connected to the internet?', 
    buttons: [ 
    { 
     text: 'OK', 
     handler:() => { 
     this.navCtrl.push(HomePage); // Redirect to HomePage...Breaks on this and Doesn't work. 
     } 
    } 
    ] 
}); 
alert.present(); 
} 

제품 page.ts (나쁜 연습 + 어쨌든 작동하지 않습니다) 그러나 NavController로 중단됩니다.

분명히 내 @componet 페이지에서만 nav에 액세스 할 수 있으며 서비스로 작동하지 않습니다.

이 문제가 해결 되었습니까? 앱 전반의 모든 페이지에 간단한 경고 메시지를 복제해야하는 것과 관련이 있습니다. 나는 서비스가 간단한 해결책이라고 생각했다.

Answer 1

:

export class BaseComponent{ 
constructor(public alertCtrl:AlertController,public navCtrl:NavController) 

networkError() { 

let alert = this.alertCtrl.create({ 
    title: 'Network Error', 
    message: 'There was a network error, are you connected to the internet?', 
    buttons: [ 
    { 
     text: 'OK', 
     handler:() => { 
     this.navCtrl.push(HomePage); // Redirect to HomePage...Breaks on this and Doesn't work. 
     } 
    } 
    ] 
}); 
alert.present(); 
} 

} 

은 다음 페이지에서이 클래스를 확장합니다.

Git Repo로 실행하십시오.

경고 - service.ts

import { AlertController, NavController } from "ionic-angular"; 
import { NetWorkErrorPage } from "../pages/net-work-error/net-work-error"; 

export abstract class AlertService { 

    constructor(public alertCtrl: AlertController, public navCtrl: NavController) { 
    } 

    //network Error 
    protected networkError() { 
     let alert = this.alertCtrl.create({ 
      title: 'Network Error', 
      message: 'There was a network error, are you connected to the internet?', 
      buttons: [ 
       { 
        text: 'OK', 
        handler:() => { 
         this.navCtrl.push(NetWorkErrorPage); 
        } 
       } 
      ] 
     }); 
     alert.present(); 
    } 

} 

home.ts

import { Component } from '@angular/core'; 

import { NavController, AlertController } from 'ionic-angular'; 
import { AlertService } from "../../utility-services/alert-service"; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage extends AlertService { 

    constructor(public navCtrl: NavController, public alertCtrl: AlertController) { 
    super(alertCtrl, navCtrl); 
    } 

    //network error 
    networkError(): void { 
    super.networkError(); 
    } 


} 

Answer 2

또 다른 해결책은 이러한 모든 유틸리티를 사용하는 BaseComponent입니다. 아래에 의견을 주시기 바랍니다 당신이 어떤 도움을 필요로 자기 explanatory.If 당신이 표시 below.Hope 코드로 abstract 유틸리티 class을 사용할 수 있습니다

export class ProductPage extends BaseComponent{ 
//... 

//call 
this.networkError(); 
}