要解决这个问题,你可以使用Angular的async
管道,它可以自动订阅父组件的Observable并在子组件显示时获取其值。
首先,在父组件中创建一个Observable,并用BehaviorSubject
来确保子组件能够订阅到其初始值。然后,在模板中使用async
管道将Observable绑定到子组件:
父组件:
import { Component } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Component({
selector: 'app-parent',
template: `
`,
})
export class ParentComponent {
data$: BehaviorSubject = new BehaviorSubject(null);
ngOnInit() {
// 模拟异步获取数据
setTimeout(() => {
this.data$.next('Hello from parent');
}, 2000);
}
}
然后,在子组件中,你可以通过输入属性接收父组件传递过来的Observable,并在模板中显示它的值:
子组件:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: `
{{ data }}
`,
})
export class ChildComponent {
@Input() data: any;
}
现在,当父组件的Observable发出新的值时,子组件会自动更新显示。
希望这可以帮到你!