なぜこの観測可能な反応はありませんか？

Question

ChangeDetectionStrategy.OnPush（不変オブジェクト）を使用して親コンポーネントからプッシュされたInput()（this.node）を使用しているため、観察可能なthis.currentNodeFilters$はngOnChangedで定義されています。

このthis.currentNodeFilters$は、現在のqueryParamsをcombineLatestで使用しています。 私は、this.currentNodeFilters$またはqueryParamsからの変更には、それに反応すると予想していることを期待していますthis.currentFilters$。しかし、何も起こりません。

質問：なぜそれが変更に反応しないのですか？ここで

私のコードです：

import {Component, OnInit, ChangeDetectionStrategy, Input} from '@angular/core'; 
import {ActivatedRoute} from "@angular/router"; 
import {Observable} from "rxjs"; 

@Component({ 
    selector: 'filter-content', 
    templateUrl: './filter-content.component.html', 
    styleUrls: ['./filter-content.component.scss'], 
    changeDetection: ChangeDetectionStrategy.OnPush 
}) 
export class FilterContentComponent implements OnInit { 

    public currentNodeFilters$: Observable<any>; 
    public currentFilters:any; 

    @Input() node; 

    constructor(private route: ActivatedRoute) { } 

    ngOnChanges() { 
    this.currentNodeFilters$ = Observable.of({ 
     "params": { 
      "nodes": this.node.id 
     }, 
     "order": "asc" 
     } 
    ) 
    } 

    ngOnInit() { 
    const queryParams$ = this.route.queryParams; 

    // On regarde les queryParams pour construire currentFilters 
    Observable.combineLatest(this.currentNodeFilters$, queryParams$, (currentFilter, queryParams) => { 
     const p = Object.keys(queryParams).map(key => { 
      const params = {}; 
      params[key] = queryParams[key]; 
      return Object.assign({}, {"params": params}) 
     }) 

     return Object.assign({}, currentFilter, p); 
     }) 
     .subscribe(currentFilters => this.currentFilters = currentFilters) 

    } 
} 

そして

node: {{node | json}} from filter-content<br> 
currentNodeFilters$: {{currentNodeFilters$ | async | json}}<br> 
currentFilters: {{currentFilters | json}} 

Answer 1

加入HMLファイル私が見る主な問題は、あなたがすべてのngOnChangesに観察できる$ currentNodeFiltersを再定義することです。代わりに、ngOnChangesメソッドが呼び出されるたびに、オブザーバブルを使って新しい値をプッシュする必要があります。代わりに、このようなことをしたい場合は、Subjectを使用する必要があります。あなたのコードは次のようになります：

// Create a subject instead of an observable 
public currentNodeFilters$: Subject<any> = new Subject(); 
public currentFilters:any; 

@Input() node; 

constructor(private route: ActivatedRoute) { } 

ngOnChanges() { 
    // next the value through the subject 
    this.currentNodeFilters$.next{ 
     "params": { 
      "nodes": this.node.id 
     }, 
     "order": "asc" 
     } 
    ) 
    }