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目录包含父目录，而父目录包含其组件，服务和子目录。

我正在尝试从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);
}
}

家长

 @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')
  });
}
}

儿童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')
}
}

当子方法触发时，知道服务在我执行console.log（任务）时收到'Mars'，但我不能让父母打印火星。

我想知道是否因为我把孩子放在子目录中。

感谢您的时间！

Answer 1

您需要提供

providers: [GlobalService]

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

Answer 2

您可以采用的一种方法是在需要传递数据时在子对象中发出@Output()声明。我想你是说这就是你正在做的事情，这会很快变得混乱。

如果要使用服务，请创建一个存储所有值的对象，并将其添加到服务类中。然后，在服务中创建getter / setter并让孩子们使用它们。 This stackoverflow显示了一些示例。

Angular 2父母与子女通过服务沟通

2 个答案: