如何从 Ionic 2 中导航到的页面访问主要组件的功能？

Question

我使用以下命令创建了一个 Ionic v2 应用程序：

ionic start my-app sidemenu --v2 --ts.

在 app.ts 文件中，我有一些逻辑（函数）来做一些事情（比如打开模式并维护侧边菜单应显示的状态）。当显示某个页面（例如 pages/getting-started/getting-started.ts）时，我想在 app.ts 中重用相同的功能。如何从导航到的页面访问 app.ts 的功能？

我的 app.ts 如下所示。

class MyApp {
 @ViewChild(Nav) nav:Nav;
 private rootPage:any = GettingStartedPage;
 private pages:any;

 constructor(platform:Platform) {
  this.initializeApp();
  this.pages = { 
   'GettingStartedPage': GettingStartedPage, 
   'AnotherPage': AnotherPage //more pages and modals
  };
 }

 initializeApp() {
  this.platform.ready().then(() => {
   StatusBar.styleDefault();
  });
 }

 openPage(page:string) {
  //when a user clicks on the left menu items, a new page is navigated to
  let component this.pages[page];
  this.nav.setRoot(component);
 }

 openModal(page:string) {
  //modals are opened here, there's more complicated logic
  //but this serves to demonstrate my problem
  let component = this.pages[page];
  Modal.create(component);
 }
}

ionicBootstrap(MyApp);

我的 getting-started.ts 如下所示。

export class GettingStartedPage {
 constructor(
  platform:Platform, 
  viewController:ViewController,
  navController:NavController,
  navParams:NavParams) {
 }

 buttonClicked() {
  //i need to access app.ts openModal here
  //how do i call a method on app.ts?
  //like MyApp.openModal('SomeModal');
 }
}

Answer 1

使用共享服务，您可以跨整个应用程序进行通信。

创建服务class喜欢

@Injectable() 
class SharedService {
  // use any kind of observable to actively notify about new messages
  someEvent:Subject = new Subject(); 
}

在您的应用程序上提供它

@App({
  ...
  providers: [SharedService]
})

将其注入 App 组件以及您希望与来自

的 App 组件通信的任何组件、指令或服务

constructor(private sharedService:SharedService) {}

someEventHandler() {
  this.sharedService.someEvent.next('some new value');
}

在App组件中订阅通知

constructor(sharedService:SharedService) {
  sharedService.someEvent.subscribe(event => {
    if(event == ...) {
      this.doSomething();
    }
  });
}

详情见https://angular.io/docs/ts/latest/cookbook/component-communication.html

Answer 2

使用 Ionic 2，您可以使用 Events 进行组件之间的通信。例如，在您的函数 buttonClicked() 中，您可以触发一个事件

buttonClicked() {
  this.events.publish('functionCall:buttonClicked', thisPage);
}

听听在你的主要 class 的构造函数中打开模态：

this.events.subscribe('functionCall:buttonClicked', userEventData => { 
  openModal(userEventData[0]);
});

您甚至可以随事件发送数据（此处：thisPage）。

Answer 3

或者，您也可以选择

Events

Events is a publish-subscribe style event system for sending and responding to application-level events across your app.

或EventEmitter

EventEmitter is an angular2 abstraction and its only purpose is to emit events in components.

Answer 4

页面组件TS文件中：

import { MyApp } from '../../app/app.component';

constructor(public AppComponent: MyApp) {
  }

然后在页面内任何您想访问该功能的地方：

this.AppComponent.functionName();

如何从 Ionic 2 中导航到的页面访问主要组件的功能？

How can I access the main component's functions from a page navigated to in Ionic 2?

ionic-framework

ionic-view

ionic2

angular