Как использовать Observable во входном угловом декораторе?

Question

У меня есть сомнения по поводу предмета.Я использую 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)

}

В этом случае я использую Input Decorator в качестве Outuputдекоратор.Есть лучший способ подключения к компоненту через тему?

Таким образом я применил Какие проблемы я могу найти с ним?

Answer 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);
    }
}

И ваши компоненты могут подписаться на этоservice:

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);
    }
}

Вы можете использовать data$ в своем html с async pipe, или, если вы предпочитаете, вы можете подписаться вручную в коде, но не забудьте отписаться внутри 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);
    }
}