別のコンポーネントの関数を呼び出す方法

Question

私は2つのコンポーネントnavbarとloginを持っていますが、ログインコンポーネントのnavbarで関数を呼びたいと思いますが、これまでに試してみましたが...... did352私navbar.ts、

import {Component, OnInit} from '@angular/core'; 

@Component({ 
    selector: 'header-Navbar', 
    templateUrl: './app/navbar/navbar.html', 
}) 
export class Navbar implements OnInit { 

    constructor(public router: Router) { 

    } 
    get(){ 
     if (this.user == null) { 
      this.showstartupbuttons = true; 
      this.showsicons = false; 
     } 
     else { 
      this.username = this.user.username; 
      this.showsicons = true; 
      this.showstartupbuttons = false; 
     } 
    } 

私login.tsは、

import {Component, OnInit} from '@angular/core'; 
@Component({ 
    templateUrl: './app/login/login.html', 
    providers:[Navbar] 
}) 
export class Login implements onInit{ 
    ckeditorContent:any; 
    constructor(public navbar:Navbar) {} 
     ngOnInit(){ 
      this.navbar.get(); 
     } 

私はプロバイダを使用しますが、私は助けをしてください示唆これらprocess.Can誰もわからないです。

Answer 1

このようなコンポーネントのやりとりにサービスを使用できます。

import { Subject } from 'rxjs/Subject'; 
import { Injectable } from '@angular/core'; 

@Injectable() 
export class NavbarService{ 
    private getSource = new Subject<any>(); 
    get$ = this.getSource.asObservable(); 

    triggerNavbarGet(){ 
     this.getSource.next(null); 
    } 
} 

このサービスは、navbarとloginの両方に注入する必要があります。覚えておいてください、サービスは各プロバイダのためのシングルトンです。したがって、このサービスは、navbarとloginの両方を含むコンポーネントによって提供される必要があります。あなたのナビゲーションバーのコンポーネントに

：

constructor(public router: Router, navbarService: NavbarService) { 
    navbarService.get$.subscribe(param => {this.get();}) 
} 

そして、あなたは、コンポーネント間の相互作用hereについて

constructor(public navbar:Navbar, private navbarService: NavbarService) {} 
     ngOnInit(){ 
      this.navbarService.triggerNavbarGet(); 
     } 

詳細のようなあなたのログインコンポーネントにこの機能を起動することができます。