angular - 如何在 Angular 两个子组件之间进行通信？

Question

<分区>

Answer 1

除了使用 @Input/@Output 和父组件作为“桥梁”的解决方案外，一种常见的方法是引入共享服务。该服务需要在父组件中提供，以便子组件可以共享该服务的单个实例 (How do I create a singleton service in Angular 2?)。

使用 BehaviorSubject as a delegate 的基本示例:

@Injectable()
export class SharedService {

    messageSource: BehaviorSubject<string> = new BehaviorSubject('');

    constructor() { }
}

子组件 1:

export class ChildComponent1 {

    constructor(private sharedService: SharedService) { }

    sendMessage(): void {
        this.sharedService.messageSource.next('Hello from child 1!');
    }
}

子组件 2:

export class ChildComponent2 {

    constructor(private sharedService: SharedService) { }

    ngOnInit(): void {
        this.sharedService.messageSource.subscribe((message) => {
            console.log('Message: ', message); // => Hello from child 1!
        });
    }
}

另请参阅:Angular2 - Interaction between components using a service