app.component.tsと別のコンポーネントとの通信角度2

Question

角度1のアプリをより効率的なものに移動したいので、私は角度2の初心者です。そして、私は2つのコンポーネント間の通信を利用する方法を理解していません。私のケースは特別なことだと思うのですが、私のデータを送信したいからです。app.component.tsからhome.ts。 これらの2つのクラスは同じディレクトリにありません。

<ion-menu [content]="content" side="left" id="menuParameter"> 
 
    <ion-header> 
 
     <ion-toolbar color="default"> 
 
      <ion-title>Menu1</ion-title> 
 
     </ion-toolbar> 
 
    </ion-header> 
 
    
 
    <ion-content> 
 

 
     <ion-list>    
 
      <ion-item> 
 
       <ion-label>On/Off</ion-label> 
 
       <!-- click here to switch on/off --> 
 
       <ion-toggle color="danger" checked="false" [(ngModel)]="isToggled" (ionChange)="notify()"></ion-toggle> 
 
      </ion-item> 
 
     </ion-list>    
 
    </ion-content> 
 
</ion-menu> 
 

 
<ion-menu [content]="content" side="right" id="menuInformation"> 
 
    <ion-header> 
 
     <ion-toolbar color="default"> 
 
      <ion-title>Menu2</ion-title> 
 
     </ion-toolbar> 
 
    </ion-header> 
 
    <ion-content> 
 
    </ion-content> 
 
</ion-menu> 
 

 
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

：ファイルapp.htmlで初

>src 
 
    > app 
 
    - app.component.ts //where the data are generated - 2 lateral menus 
 
    - app.html //html associated to app.component.ts 
 
    - app.module.ts 
 
    - app.scss 
 
    > pages 
 
    > home 
 
     - home.html //home page 
 
     - home.ts 
 
     - home.scss

私がボタンを持っている：ここでは

は私のアプリのアーキテクチャですこのボタンをクリックすると私はapp.component.tsに値をキャッチ：可能であれば

import { Component } from '@angular/core'; 
 
import { Platform } from 'ionic-angular'; 
 
import { StatusBar } from '@ionic-native/status-bar'; 
 
import { SplashScreen } from '@ionic-native/splash-screen'; 
 
import { HomePage } from '../pages/home/home'; 
 

 

 

 
@Component({ 
 
    templateUrl: 'app.html' 
 
}) 
 
export class AppComponent { 
 
    rootPage:any = HomePage; 
 

 
    constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) { 
 
    platform.ready().then(() => { 
 
     statusBar.styleDefault(); 
 
     splashScreen.hide(); 
 
     this.isToggled = false; 
 

 
    
 
    }); 
 
    } 
 

 
    public isToggled: boolean; 
 
    
 
    public notify() { 
 
    //i want to send this value to home.ts component ! 
 
    console.log("Toggled: "+ this.isToggled); 
 
    } 
 

 

 
}

最後に、私はhome.tsと呼ばれるコンポーネントには、この値を取得したいと思います：事前で

import { Component } from '@angular/core'; 
 
import { Logger } from '../../app/logger.service' 
 

 

 
import { HttpClient } from '@angular/common/http'; 
 
import { NavController, NavParams, MenuController } from 'ionic-angular'; 
 
import {TranslateService} from '@ngx-translate/core'; 
 

 

 

 
@Component({ 
 
    selector: 'page-home', 
 
    templateUrl: 'home.html' 
 
}) 
 

 
/** 
 
* Contain link with 
 
*/ 
 
export class HomePage { 
 

 
    private logger:Logger = new Logger(this.constructor.name); 
 

 

 

 
    constructor(public translate: TranslateService, public navCtrl: NavController, 
 
    public navParams: NavParams, 
 
    public menu: MenuController, private httpClient:HttpClient) { 
 
    this.logger.log("instantiating HomePage()"); 
 
    menu.enable(true); 
 
    
 
    
 
    translate.setDefaultLang('en'); 
 
    translate.use('en'); 
 
    } 
 

 

 

 
    openMenu(evt) { 
 
    if(evt === "main"){ 
 
     this.menu.enable(true, 'menuParameter'); 
 
     this.menu.enable(false, 'menuInformation'); 
 
    }else{ 
 
     this.menu.enable(true, 'menuInformation'); 
 
     this.menu.enable(false, 'menuParameter'); 
 
    } 
 
    this.menu.toggle(); 
 
} 
 

 
//method to get the value catched in app.component.ts that is to say the button value (true or False)! 
 

 

 
}

感謝

JP

Answer 1

このため、イオンイベントAPIを使用するには、それを使用するために非常に簡単です、あなたのアプリケーションコンポーネントは、トピックに公開すると、ホーム・コンポーネントは、あなたの周りに渡したい、そのデータを取得するために、そのトピックにサブスクライブします。

詳細here。

Answer 2

角度のイベントAPIを使用できます。 You can refer this link as well.

以下は現在使用中の例です。

からインポート{events} from 'ionic-angular';

使用法：

constructor(public events: Events) { 

/*========================================================= 
= Keep this block in any component you want to receive event response to   = 
==========================================================*/ 

// Event Handlers 
events.subscribe('menu:opened',() => { 
    // your action here 
    console.log('menu:opened'); 
}); 

events.subscribe('menu:closed',() => { 
    console.log('menu:closed'); 
}); 

} 

/*===================================================== 
= Call these on respective events - I used them for Menu open/Close   = 
======================================================*/ 


menuClosed() { 
// Event Invoke 
    this.events.publish('menu:closed', ''); 
} 

menuOpened() { 
// Event Invoke 
    this.events.publish('menu:opened', ''); 
} 
}