如何在 Input Angular Decorator 中使用 Observable？答案

【问题标题】：How to use an Observable in Input Angular Decorator?如何在 Input Angular Decorator 中使用 Observable？
【发布时间】：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)

}

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

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

【问题讨论】：

标签： angular rxjs

【解决方案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);
    }
}

【讨论】：