如何在Angular 2中溝通組件

我正在用Angular 2（在其最新版本中）構建應用程序，並且我想在組件之間進行通信。如何在Angular 2中溝通組件

這是我的工作區：

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

我想從dashboard.component.ts呼叫在footer.component.ts的方法。

這是我的代碼：

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中的Android，我可以用靜態方法或實施巴士的活動或片段的通信，在角我不知道我能做些什麼

來源

2017-06-14 VipPunkJoshers Droopy

callWalking實際上做了什麼？如果它只是一個工具，我會把它分解成它自己的類，並將它拖到需要的地方。如果實際需要在兩個組件之間傳遞信息，也可以使用輸入綁定：https://angular.io/guide/component-interaction#!#bidirectional-service –

@DanWeber它是否可以在不同組件之間傳遞數據？在文檔中說：將父母的數據傳遞給帶有傳入鏈接的孩子，而我的組件不是父母和孩子。或者至少我不知道它們是否是，我認爲不是:(。） –

它們都是應用程序組件的子組件（嵌套組件）。 – DeborahK

構建一個Angular服務來管理通信。

1。創建服務

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.設置提供商app.module（主模塊）

.... 

providers: [TestService], 

bootstrap: [AppComponent] 

....

3的Emit事件

constructor(private ls: TestService) { } 

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

4.接收事件

constructor(private ls: TestService) { } 

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

來源

2017-06-14 01:18:46

我很好奇這個例子中eventemitter的目的，我發現我可以簡單地訪問服務的屬性，如果他們受到約束，他們會適當地改變...不需要發佈事件，但我想我可能會錯過一個用例？（我沒有eventEmitter的例子在這裏：https：//blogs.msmvps.com/deborahk/建立-A-簡單角服務對共享數據/） – DeborahK

一種選擇是添加@輸入和@output屬性的組件。然後可以使用@output屬性將數據從組件傳遞到其父組件，父組件可以使用其@input屬性將信息傳遞給其他子組件之一。

第二個選項是構建一個Angular服務來管理通信。任何組件都可以調用服務中的方法，其他組件可以綁定到服務屬性。

來源

2017-06-14 00:21:18 DeborahK

非常感謝你的迴應，幫助我找到了一個好的起點，我決定使用選項2。想知道這是不是最好的方法，可能有更好的方法去做 –

如何在Angular 2中溝通組件

回答

相關問題