Kommunikation zwischen app.component.ts und einer anderen Komponente angular 2

Question

Ich bin ein Anfänger in Angular 2, da ich meine App von Winkel 1 zu etwas effizienterem bewegen möchte. Und ich verstehe nicht, wie man eine Kommunikation zwischen zwei Komponenten zur Verfügung stellt. Mein Fall ist, denke ich besonders, weil ich einige Daten von meinem app.component.ts zu home.ts senden möchte. Diese beiden Klassen befinden sich nicht im selben Verzeichnis. Hier

ist die Architektur meiner App:

>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

Zuerst in der Datei app.html habe ich eine Taste:

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

Wenn auf diese Schaltfläche klicken, ertappe ich den Wert in den 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); 
 
    } 
 

 

 
}

Schließlich möchte ich, wenn möglich, diesen Wert in der Komponente namens home.ts zu bekommen:

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)! 
 

 

 
}

Vielen Dank im Voraus

JP

Answer 1

Verwenden Sie die ionischen Ereignisse api für diese, ist es ziemlich einfach zu bedienen ist, wird Ihre App-Komponente zu einem Thema veröffentlichen und die Heimat-Komponente wird zu diesem Thema abonnieren, die Daten, die Sie um übergeben möchten abzurufen.

Weitere Details here.

Answer 2

Sie können die API für Ereignisse in angular verwenden. You can refer this link as well.

Folgendes Beispiel werde ich gerade verwenden.

Import {Ereignisse} von 'ionic-angular';

Verbrauch:

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', ''); 
} 
}