Angular 2 parent 到 child 通过服务通信

Question

我有一个 Angular 2 具有以下结构的应用程序

app (dir)
|-parent(dir)
 -parent.component
 -global.service (used to communicate with children)
    |-child1 (dir)
     -child1.component
    |-child2 (dir)
     -child2.component

例如app目录包含parent目录，parent目录包含其组件、服务和一个child目录。

我正在尝试实施来自 Angular.io 的 Mission 服务示例：Parent and children communicate via a service

服务

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

@Injectable()
export class GlobalService {


// Observable string sources
private missionAnnouncedSource = new Subject<string>();
private missionConfirmedSource = new Subject<string>();
// Observable string streams
missionAnnounced$ = this.missionAnnouncedSource.asObservable();
missionConfirmed$ = this.missionConfirmedSource.asObservable();
// Service message commands
announceMission(mission: string) {
    this.missionAnnouncedSource.next(mission);
}
confirmMission(astronaut: string) {
    this.missionConfirmedSource.next(astronaut);
}
}

Parent

 @Component({
 selector: 'parent',
 templateUrl: './app/parent/parent.component.html',
 styleUrls: ['./app/parent/parent.component.css'],
 providers: [GlobalService]
 })
export class ParentComponent {
constructor(private globalService: GlobalService) {
globalService.missionConfirmed$.subscribe(
  astronaut => {
    console.log('filter ' + astronaut);
  },
  (error: string) => {
    console.log('filter error')
  },
  () => {
    console.log('filter done fetching')
  });
}
}

Child 1

@Component({
selector: 'child1',
templateUrl: './app/parent/child1/child1.component.html',
styleUrls: ['./app/parent/child1/child1.component.css'],
providers: [GlobalService]
}) 
export class ChildComponent {
filterFormSubmit(filterFormValue: JSON): void {
this.filterFormValue = filterFormValue;
this.globalService.confirmMission('Mars')
}
}

当 child 方法触发时，知道服务在我执行 console.log（任务）时收到 'Mars'，但我无法让 parent 打印火星.

我想知道是不是因为我在 sub-directory 中有 child。

感谢您的宝贵时间！

Answer 1

一种方法是在 children 中有 @Output() 声明，当需要传递数据时发出 object。我认为您是在说这就是您正在做的事情，这很快就会变得一团糟。

如果您想使用服务，请创建一个 object 来存储所有值并将其添加到您的服务 class。然后，在服务中创建 getters/setters 并让 children 使用它们。 Whosebug 显示了一些示例。

Answer 2

您需要提供

providers: [GlobalService]

在包含这些组件的模块中（或在作为这两个组件的父组件的组件中）。否则服务将是单例的。

Angular 2 parent 到 child 通过服务通信

Angular 2 parent to child communication through service

angular2-services

angular