Angular 2でコンポーネントを通信する方法

Question

Angular 2（最新バージョン）でアプリケーションを構築していますが、コンポーネント間で通信したいと思います。私はdashboard.component.tsからfooter.component.tsでメソッドを呼び出したい

src 
    app 
     navbar 
      navbar.component.ts 
     footer 
      footer.component.ts 
     section 
      dashboard 
       dashboard.component.ts 
      section.component.html 
      section.component.ts 
      section.module.ts 
     sidebar 
      sidebar.component.ts 
     app.component.html 
     app.module.ts 
    assets 

：

は、これは私のワークスペースです。

これは私のコードです：

footer.component.ts

export class FooterComponent implements OnInit { 

    ngOnInit() { 

    } 

    walking(){ 
    console.log("Method of called walking"); 
    } 

} 

dashboard.component.ts

export class DashboardComponent implements OnInit { 

    ngOnInit() { 

    } 

    callWalking(){ 
    console.log("Call to walking method"); 
    } 

} 

app.module.ts

@NgModule({ 
    declarations: [ 
    AppComponent, 
    SectionComponent, 
    SidebarComponent, 
    NavbarComponent, 
    FooterComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    SectionModule, 
    RouterModule.forRoot([]) 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

app.component.html

<app-navbar></app-navbar> 
<app-sidebar></app-sidebar> 
<app-section></app-section> 
<app-footer></app-footer> 

section.module.ts

@NgModule({ 
    imports: [ 
    CommonModule, 
    RouterModule.forRoot(
     [ 
     { path: 'dashboard', component: DashboardComponent }, 
     { path: '', redirectTo: 'dashboard', pathMatch: 'full' }, 
     { path: '**', component: DashboardComponent } 
     ] 
    ) 
    ], 
    declarations: [DashboardComponent] 
}) 
export class SectionModule { } 

section.component.html

<router-outlet></router-outlet> 

私は文字通り「フッタコンポーネント>ウォーク（）」メソッドを呼び出すためにどのようにコンポーネントdashboard.component.tsから

を成分「footer.component.ts」の「歩く（）」メソッドを呼び出したいですパネルコンポーネントメソッドから> callWalking（）？ Javaのアンドロイドで

私は角に私は

Answer 1

通信を管理するために角度サービスを構築します。

1。4.イベントを受け取るサービスapp.moduleで

import { Injectable, Output,EventEmitter } from '@angular/core'; 

@Injectable() 
export class TestService { 



@Output() event$:EventEmitter<boolean>=new EventEmitter(); 

    constructor() { 

    } 

    setEventEmitter(enable:boolean) { 
     this.event$.next(enable); 
    } 

    getEventEmitter() { 
    return this.event$; 
    } 

} 

2.プロバイダ（メインモジュール）

.... 

providers: [TestService], 

bootstrap: [AppComponent] 

.... 

3.エミットイベント

constructor(private ls: TestService) { } 

ngOnInit() { 
     this.ls.setEventEmitter(true); 
} 

を作成します。

constructor(private ls: TestService) { } 

ngOnInit() { 
    this.ls.getEventEmitter().subscribe(e => { 
     if(e != null) { 
      console.log("Code here"); 
     } 
    }); 
} 

Answer 2

一つの選択肢は、追加することです何ができるか を知らない、静的メソッドを使用するか、または活動またはフラグメントの 通信のためのバスを実装することができます@ inputおよび@outputプロパティを設定します。 @outputプロパティを使用してコンポーネントから親にデータを渡すことができ、親は@inputプロパティを使用して他の子コンポーネントのいずれかに情報を渡すことができます。

2番目のオプションは、コミュニケーションを管理するためにAngularサービスを構築することです。どのコンポーネントもサービス内のメソッドを呼び出すことができ、他のコンポーネントはサービスプロパティにバインドできます。