Question

我正在使用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>

我真的想打电话给＆＃34; walk（）＆＃34;组件的方法＆＃34; footer.component.ts＆＃34;来自组件dashboard.component.ts

如何调用＆＃34;页脚组件＆gt;走路（）＆＃34; <面板成分法的方法> callWalking（）？

在Java Android中，我可以使用静态方法或实现总线活动或片段的沟通，有点我不知道我能做什么

Answer 1

一种选择是在组件上添加@input和@output属性。然后，可以使用@output属性将数据从组件传递到其父组件，父组件可以使用其@input属性将信息传递给其他子组件之一。

第二种选择是构建一个Angular服务来管理通信。任何组件都可以调用服务中的方法，其他组件可以绑定到服务属性。

Answer 2

构建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。发出事件

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");
        }
    });  
}

如何在Angular 2中传达组件

2 个答案: