异步管道不绑定到角度Observable

Question

我有一个Angular（4）中的情况异步管道没有绑定到ngAfterViewInit()中设置的Observable，除非我使用Observable.interval(1000)在构造函数中初始化它。如果我删除了.interval-部分，则当ngAfterViewInit()运行时，异步管道将不会订阅观察值。

我想初始化的观像这样在类的顶部，但打破了功能：

resultStream: Observable<string>; 
genderStream: Observable<number>; 

我必须声明它们是这样的：那么

// Weird fix: I need to add .interval(?) for async pipe to work later on... 
resultStream: Observable<string> = Observable.interval(1000).map(() => ""); 
genderStream: Observable<number> = Observable.interval(1000); 

我解决方案现在感觉有点不满意，因为我必须使用.interval()设置。

问题是转载于本plunker：https://plnkr.co/edit/q3TR5iszU1swFrTjajEa

点击性别，并在输入框中输入一个整数，显示的结果。

你能帮助我一个简单/优雅的解决方案吗？ 谢谢。

完整的类是这样的：

import { Component, OnInit, ViewChild, ElementRef, AfterViewInit, ChangeDetectionStrategy } from '@angular/core'; 
import { Observable } from 'rxjs/Rx'; 


@Component({ 
    selector: 'my-app', 
    template: ` 
    <div class="row"> 
    <div class="col-md-6"> 
     <form class="form-inline"> 
      <input #distance class="form-control" placeholder="Distance"> 
      <button #femaleGender type="button" class="btn btn-default" [class.active]="(genderStream | async) === 1">Female</button> 
      <button #maleGender type="button" class="btn btn-default" [class.active]="(genderStream | async) === 0">Male</button> 
     </form> 
    </div> 
    <div class="col-md-6"> 
     <h4>Result: {{ resultStream | async }}</h4> 
    </div> 
    </div> 
`, 
    changeDetection: ChangeDetectionStrategy.OnPush 
}) 
export class AppComponent implements AfterViewInit { 

    // Weird fix: I need to add .interval(?) for async pipe to work later on... 
    resultStream: Observable<string> = Observable.interval(1000).map(() => ""); 
    genderStream: Observable<number> = Observable.interval(1000); 

    @ViewChild('distance') distance: ElementRef; 
    @ViewChild('maleGender') maleGender: ElementRef; 
    @ViewChild('femaleGender') femaleGender: ElementRef; 


    ngAfterViewInit() { 
     let distance$ = Observable.fromEvent(this.distance.nativeElement, 'keyup') 
      .map((event: Event) => event.target) 
      .map((element: HTMLInputElement) => element.value) 
      .map(value => parseInt(value)) 
      .filter(value => !isNaN(value)); 

     // In the calculation 0 is used for males and 1 for females. 
     let male$ = Observable.fromEvent(this.maleGender.nativeElement, 'click').map(() => 0); 
     let female$ = Observable.fromEvent(this.femaleGender.nativeElement, 'click').map(() => 1); 
     let gender$ = Observable.merge(male$, female$); 

     this.genderStream = gender$; 

     this.resultStream = Observable.combineLatest(
      distance$, 
      gender$, 
      (distance, gender) => calculateResult(distance, gender).toFixed(1) 
     ); 
    } 
} 

const calculateResult = (distance: number, gender: number) => 18.38 + (0.033 * distance) - (5.92 * gender); 

Answer 1

我想通了。

这是因为父组件的变化检测设置为ChangeDetectionStrategy.OnPush。在组件中禁用它并且父页面做了诀窍。

import { Component, ChangeDetectionStrategy } from '@angular/core' 

@Component({ 
    selector: 'parent-page', 
    // Disabling OnPush change detection did the trick: 
    // changeDetection: ChangeDetectionStrategy.OnPush, 
    templateUrl: './parent.html' 
}) 
export class ParentPage {}