javascript - Angularjs2 How to call a function from one component to another? -


this question has answer here:

scenario: have header component , have login-page component. call function header component on login-page component update header based on whether logged in or not.

question: can please explain how go doing this? i've tried using @viewchild no success. furthermore, if i'm going wrong way perhaps can enlighten me on better way?

cheers!

import ...  @component({     selector: 'header',     templateurl: '/views/header.html',     directives: [router_directives], })  export class header {      constructor() {      }      public updateright() {         alert("nope");     }  }   import ...   @component({     selector: 'login',     templateurl: '/views/login.html',     providers: [http_providers], })  export class login {     @viewchild(header) header: header;      constructor(http: http) {     }      onsubmit() {         // call function update header stuffs         this.header.updateright();     }  }

the main.ts template

<header></header> <router-outlet></router-outlet>

the header.ts template

<div id="header-wrap">     <div class="container">         <div class="row">             <div class="col-md-3">                 <h3><strong><a [routerlink]="['/home']">homepage</a></strong></h3>             </div>             <div class="col-md-6">             </div>             <div class="col-md-3" style="text-align: right;">                 <a [routerlink]="['/login']">log in</a>                 <a [routerlink]="['/register']">sign up</a>             </div>         </div>     </div> </div>

the login.ts template

<div class="container padme">     login </div>

in fact, can leverage @viewchild elements contained template of component. applies if have (assuming selector header component header):

@component({   (...)   template: `     <header></header>   ` }) export class login {   @viewchild(header) header: header;   (...) }

moreover corresponding value won't available in component constructor later:

view queries set before ngafterviewinit callback called.

so refactor code this:

@component({   (...)   template: `     <header></header>   ` }) export class login {   @viewchild(header) header: header;    ngafterviewinit() {     this.header.somefunction();   } }

if don't have relation between 2 components (and think it's case - components @ same level or on different component trees), should use shared service make them communicate. can leverage observables implement service bus...

see these questions @ level:


Comments

Post a Comment