Question

我已经研究过这个超乎想象的了。希望有人可以帮助我。

我想为我的应用中的某些不同部分提供基本的警报服务，因此我不会在我的网页上反复重复相同的警报消息。

我设置了一个提醒服务，我可以显示警报，但显然您无法从服务中访问Nav。（不好的做法+无论如何都没有工作）

警报-service.ts

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

this.alert-service.networkError();

我从productPage调用此警报显示正常，但是使用NavController打破了。

显然我只能从我的@componet页面访问导航，它不能用作服务。

这有什么解决方案吗？似乎非常复杂，必须在整个应用程序的每个页面上复制简单的警报消息。我认为服务将是一个简单的解决方案。

Answer 1

您可以使用abstract实用程序class，如下所示。希望代码不言自明。如果您需要任何帮助，请在下方发表评论。

使用 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

另一个解决方案是拥有$re = '/^http(?:s)?:\/\/\K([^\/]+\/[^\/]+\/).*$/m'; $str = 'http://example.com/a/b/c.php'; preg_match($re, $str, $matches); echo $matches[1];所有这些实用程序。

BaseComponent

然后在你的页面中扩展这个类：

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

}

Ionic 2 / Angular 2通过导航

2 个答案: