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

共有サービスを使用すると、アプリケーション全体で通信できます。

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

はあなたがAppコンポーネントと通信したいAppコンポーネントと任意のコンポーネント、ディレクティブ、またはサービスにそれを注入し、あなたのアプリにそれを提供

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

のようなサービスクラスを作成します。 〜から

constructor(private sharedService:SharedService) {} 

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

詳細について

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

通知に10コンポーネントを購読あなたはコンポーネント間の通信のためのEventsを使用することができますイオン2でhttps://angular.io/docs/ts/latest/cookbook/component-communication.html

Answer 2

を参照してください。たとえば、あなたの関数buttonClicked()であなたは、イベント

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

を発射でき、例えば、それに耳を傾けますあなたも（：thisPageこちら）イベントにデータを送信することができます

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

：あなたのメインクラスのコンストラクタでモーダルを開きます。

Answer 3

また、あなたはどちらか

Events

イベントのために行くことができますが、送信と アプリ間でのアプリケーションレベルのイベントに応答するために、パブリッシュ・サブスクライブ形式のイベントシステムです。

又はEventEmitter

持つEventEmitterはangular2抽象化であり、その唯一の目的は にあるコンポーネントのイベントを発します。その後、

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

constructor(public AppComponent: MyApp) { 
    } 

ページ内のあなたがその機能にアクセスしたい任意の場所：ページコンポーネントのTSファイルで

Answer 4

this.AppComponent.functionName();