如何用链式装饰器将Angular的@Input变量转为Observable流?
Angular Input 转 Observable 的装饰器方案优化问题
当前实现方式
我目前通过 setter 将 Angular 的 @Input 转换为流,实现代码如下:
data$ = new Subject<number[]>(); @Input() set data(value: number[]) { this.data$.next(value); }
这种方式运行正常,我可以在组件内任意使用这个流,但想通过装饰器简化写法。
期望的简化写法
理想的写法是直接用装饰器把 Input 转为 Observable,比如:
@Input() @AsObservable() data: Observable<number[]>
更偏好的命名风格是:
@Input('data') @AsObservable() data$: Observable<number[]>;
但此时 Angular 会抛出类型不匹配的错误,当父组件传入数组时:
myNumbers = [1,2,3,4];
模板中使用:
<app-my-foo [data]="myNumbers"></app-my-foo>
错误提示:
Type 'number[]' is missing the following properties from type 'Observable': source, operator, lift, subscribe, and 2 more.
更新后的期望使用示例
希望最终能这样使用:
@Component({ selector: 'app-foo', ... }) export class FooComponent implements OnInit { @Input() isBaz = false; @Input<number[]>('data') @asObservable<number[]>() data$: Observable<number[]>; @Input<boolean[]>('state') @asObservable<boolean[]>() state$: Observable<boolean[]>; ngOnInit() { combineLatest([this.data$, this.state$]).pipe(...).subscribe(...); } ... }
问题
请问有没有办法修复装饰器方案的类型不匹配问题?或者是否应该采用其他方案(比如 ngOnChanges 生命周期函数)?求建议。
内容的提问来源于stack exchange,提问作者Jeanluca Scaljeri
相关产品推荐
相关产品推荐

