如何在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中沟通组件

回答

相关问题