ionic framework - Communication between app.component.ts and another component angular 2 -

-

i beginner in angular 2 since want move app angular 1 more efficient. , don't understand how make communication between 2 components available. case think special because want send data app.component.ts home.ts. these 2 classes not in same directory.

here architecture of app : 

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

first in file app.html have button : 

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

when clicking on button catch value in app.component.ts : 

import { component } '@angular/core';  import { platform } 'ionic-angular';  import { statusbar } '@ionic-native/status-bar';  import { splashscreen } '@ionic-native/splash-screen';  import { homepage } '../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 send value home.ts component !      console.log("toggled: "+ this.istoggled);     }      }

finally, if possible value in component called home.ts : 

import { component } '@angular/core';  import { logger } '../../app/logger.service'      import { httpclient } '@angular/common/http';  import { navcontroller, navparams, menucontroller } 'ionic-angular';  import {translateservice} '@ngx-translate/core';        @component({    selector: 'page-home',    templateurl: 'home.html'  })    /**   * contain link    */  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 value catched in app.component.ts button value (true or false)!      }

thanks in advance

jp

use ionic events api this, it's pretty simple use, app component publish topic , home component subscribe topic retrieve data want pass around.

more details here.


Comments

Post a Comment

Popular posts from this blog

ios - MKAnnotationView layer is not of expected type: MKLayer -

-
Image
so code works fine logger riddled message. there way rid of or suppress it? postannotation.swift class postannotation: mkpointannotation { //mark: properties let post: post //mark: initialization init(post: post) { self.post = post super.init() self.coordinate = cllocationcoordinate2d(latitude: post.latitude, longitude: post.longitude) self.title = post.title self.subtitle = post.timestring() } } adding annotation let annotation = postannotation(post: post) self.map.addannotation(annotation) func mapview func mapview(_ mapview: mkmapview, viewfor annotation: mkannotation) -> mkannotationview? { if annotation mkuserlocation { return nil } var annotationview = mapview.dequeuereusableannotationview(withidentifier: "pin") as? mkpinannotationview if annotationview == nil { annotationview = mkpinannotationview(annotation: annotation, reuseidentifier: "pin")
Read more

ZeroMQ on Windows, with Qt Creator -

-
i have installed zmq link given below on windows 7. http://zeromq.org/distro:microsoft-windows 1) have c++ project in qt-creator , i'm using zmq c++ binding (zhelpers.hpp etc). 2) have added .lib installed zmq folder qtcreator 3) while compiling, compiler looks _imp__zmq_verion, in .dll files present in .lib have __imp_zmq_version. 4) causing undefined reference zmq_version. anyone else faced problem , has solution ?
Read more

unity3d - Unity SceneManager.LoadScene quits application -

-
i have 2 different scenes 1 named 'main' , other 'game' both added scenes in load. when use scenemanager.loadscene("game"); works no problem when tried return main scene code if (input.getkeydown (keycode.escape)) { scenemanager.loadscene("main"); } strangely game quits. thanks. sorry interruption. somewhere on other script found code. if (input.getkeydown (keycode.escape)) { application.quit (); } that's bad, know...
Read more