如何在不使用Angular中的属性绑定的情况下在父级和子级之间进行通信

Question

有没有一种方法可以在不使用属性绑定的情况下实时访问组件之间的数据：

我不能使用它的原因是，我的子组件是一个对话框，并且我在app.component.html 中使用路由器出口

Answer 1

我可以想出三种方法。。

1. 使用具有RxJS可观察性的服务
2. 使用对话框组件实例传递数据
3. 使用路由器state(状态：｛…｝(

让我给您举一个选项1的简单示例。

组件A发送数据

this.sharedService.data(data);

共享服务.ts

private data$ = new Subject<Data>();
dataListener$: Observable<Data> = this.data$.asObservable();
data(data: Data) {
this.data$.next(data);
}

组件B订阅Observable

private readonly onDestoy = new Subject<void>();    
ngOnInit(): void {
this.sharedService.data$.pipe(
takeUntil(this.onDestroy) // very important to unsubscribe
tap((data: Data) => console.log(data)) // here is your data
).susbscribe()
}

ngOnDestroy() {
this.onDestroy.next();
this.onDestroy.complete();
}

我希望它能帮助你。。