角5：次の値でサブスクリプションがトリガーされない

Question

次の値がサブジェクトにプッシュされると、親コンポーネントのサブスクリプションはトリガーされません（サブジェクトをBehaviorSubjectに変更するとデフォルト値がないので使用してください）。

option.component.ts

import { Component, OnInit, Input } from '@angular/core'; 
import { Subject } from 'rxjs'; 

@Component({ 
    selector: 'app-option', 
    templateUrl: './option.component.html' 
}) 
export class OptionComponent implements OnInit { 

    @Input() httpHeader; 

    period: Subject<string> = new Subject<string>(); 

    constructor(){} 

    ngOnInit(){} 

    setPeriod(period: string){ 
     this.period.next(period); 
     console.log('Next period: ' + period); 
    } 
} 

option.component.html

<mat-radio-group [(ngModel)]="periode" (ngModelChange)="setPeriod($event)"> 
    <span *ngFor="let option of httpHeader.option"><mat-radio-button [checked]="option.default" [value]="option.param" >{{ option.desc }}</mat-radio-button><br /></span> 
</mat-radio-group> 

---

親コンポーネント：

periodeomzet.component

<app-option [httpHeader]="httpHeader"></app-option> 

periodeomzet.component.html .TS

import { Component, OnInit, Output } from '@angular/core'; 
import { Subscription } from 'rxjs'; 
import { httpService } from 'app/services/http.service'; 
import { OptionComponent } from 'app/units/option/option.component'; 

@Component({ 
    selector: 'app-periodeomzet', 
    templateUrl: './periodeomzet.component.html', 
    providers: [OptionComponent] 
}) 
export class PeriodeomzetComponent implements OnInit { 

    httpHeader: Object; 
    subData: Subscription; 
    subOptions: Subscription; 
    period: string = 'period=d'; 

    constructor(
     private httpService: httpService, 
     private option: OptionComponent 
    ){} 

    getReport(){   
     this.subData = this.httpService.getReport().subscribe((res: Response) => { 
      this.httpHeader = res.json()['header']; 
     }); 
    } 

    ngOnInit(){ 
     this.subOptions = this.option.period.subscribe(period => { 
      console.log('subOptions subscription fired'); 

      this.period = period; 
      this.getReport(); 
      // Do other stuff 
     }); 
    } 

    ngOnDestroy(){ 
     this.subData.unsubscribe(); 
     this.subOptions.unsubscribe(); 
    } 
} 

私はラジオボタンの選択を変更するが、それだけで「次を示していたときに、コンソールに「サブオプションは、解雇する」を参照してくださいに期待期間：... "なぜそれは動作しません？

Answer 1

あなたが行っているようなコンポーネントを注入することはできません。代わりに、コンポーネントを参照し、ViewChild（またはViewChildren）を使用してコンポーネントを選択する必要があります。テンプレートで

、あなたは周期成分で、その後

<app-option #option [httpHeader]="httpHeader"></app-option> 

を使用することができます。

@ViewChild('option') option: OptionComponent; 

あなたはまた、ベース、それを選択することができ#optionテンプレートの構文を使用しない場合

@ViewChild(OptionComponent) option: OptionComponent;