如何在 Input Angular Decorator 中使用 Observable？

Posted 2023-02-23

【中文标题】如何在 Input Angular Decorator 中使用 Observable？

【英文标题】：How to use an Observable in Input Angular Decorator?

【发布时间】：2020-01-23 18:55:56

【问题描述】：

我对主题有疑问。我在父组件中使用 Observable，并通过装饰器 Input 将其传递给子组件。

在子组件中，我获取该流并应用next()，因为父组件接收来自子组件的数据。

子组件：

@Input() test = new Subject<any>();

private sendDataToParent(data:any): void 
this.test.next(data);

父组件：

test = new Subject<any>();

ngOnInit() 

this.test.subscribe(console.log)

在这种情况下，我使用输入装饰器作为输出装饰器。有没有更好的方法通过主题连接到组件？

这样我应用了我能找到哪些问题？

【参考方案1】：

Angular 被构建为通过属性（输入）将数据传递给子组件，并通过事件（输出）发送回父组件。

在您的场景中，我看不出有理由不将数据传递给 @Output 属性中的父级：

@Output() test = new EventEmitter<any>();
private sendDataToParent(data:any): void 
    this.test.emit(data);


<app-child (test)="parentMethod($event)></app-child>

如果您需要扩展有关此主题的知识，您应该阅读此文档： https://angular.io/guide/component-interaction

无论如何，有时您需要跨多个组件、多个父级或子级的相同数据，您可以使用Observables 来管理此问题，但您应该创建一个服务以注入所有这些组件。

@Injectable()
export class MyDataService 
    private dataSubject$: BehaviorSubject<MyData> = new BehaviorSubject<MyData>(null);

    getData$(): Observable<MyData> 
        return this.dataSubject$;
    

    changeData(data: MyData) 
        this.dataSubject$.next(data);
    

您的组件可以订阅该服务：

export class MyComponent implements OnInit 
    public data$: Observable<MyData>;

    constructor(private dataService: MyDataService) 
        this.data$ = this.dataService.getData$();
    

    ngOnInit() 

    changeData(data: MyData) 
        this.dataService.changeData(data);
    

您可以在您的 html 中使用 data$ 和 async 管道，或者如果您愿意，您可以在代码中手动订阅，但不要忘记在 ngOnDestroy 内取消订阅，这可能是一种方法：

export class MyComponent implements OnInit, OnDestroy 
    private destroy$ = new BehaviorSubject<boolean>(false);

    constructor(private dataService: MyDataService) 

    ngOnInit() 
        this.dataService.getData$()
            .pipe(takeUntil(this.detroy$))
            .subscribe(data => 
                // do x
            );
    

    ngOnDestroy() 
        this.destroy$.next(true);
        this.destroy$.unsubscribe();
    

    changeData(data: MyData) 
        this.dataService.changeData(data);