Angular 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.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();
    }
}

periodeomzet.component.html

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

当我更改单选按钮的选择时，我希望在控制台中看到“子选项已触发”，但它只显示“下一个周期：...”。为什么它不起作用？

Answer 1

您不能像现在这样注入组件。相反，您需要引用该组件并使用ViewChild（或ViewChildren）来选择它。

在你的模板中，你可以使用

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

那么，在周期部分：

@ViewChild('option') option: OptionComponent;

如果不想使用#option模板语法也可以根据组件类来选择：

@ViewChild(OptionComponent) option: OptionComponent;