在容器组件的HTML模板中使用async语法绑定共享控件的input属性到Observable对象。 共享控件示例代码:
@Component({
selector: 'shared-control',
template: {{data}}
,
})
export class SharedControlComponent {
@Input() data: string;
}
容器组件示例代码:
@Component({
selector: 'container-component',
template:
})
export class ContainerComponent implements OnInit {
data$: Observable
constructor(private dataService: DataService) { }
ngOnInit() { this.data$ = this.dataService.getData(); } }
其中,dataService是一个服务,getData()方法返回一个Observable类型的数据。在容器组件中,通过调用该服务获取数据,并将数据绑定到共享控件的data属性中。在HTML模板中,通过async语法将Observable类型的数据绑定到共享控件的input属性中。这样,当数据发生变化时,共享控件会自动更新。