app.component.ts 和另一个组件 angular 之间的通信 2

Question

我是 Angular 2 的初学者，因为我想将我的应用程序从 angular 1 转移到更高效的地方。而且我不明白如何在两个可用组件之间进行通信。我认为我的情况很特别，因为我想将一些数据从 app.component.ts 发送到 home.ts。 这两个类不在同一个目录。

这是我的应用程序的架构：

>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.html 我有一个按钮：

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


}

提前致谢

日本

Answer 1

为此使用离子事件 api，使用起来非常简单，您的应用程序组件将发布到一个主题，而主页组件将订阅该主题以检索您要传递的数据。

更多详情here。

Answer 2

您可以在 angular 中使用事件 API。 You can refer this link as well.

以下是我目前正在使用的示例。

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

app.component.ts 和另一个组件 angular 之间的通信 2

Communication between app.component.ts and another component angular 2

ionic-framework

ionic2

angular2-services

angular