Question

所以我在下面有这个惊人的代码... 但我对这一行只有一个问题

.subscribe(this.incrementingDisplay.display$);

将值推入

@Output() display$ = new Subject()

哪个工作正常...但是，我想知道为什么它正常工作，因为显示$是一个@Output，所以它怎么能接受来自this.incrementingDisplay.display $

的输入

再次，一切正常，只是试图理解，因为它似乎应该是@Input而不是@Output在显示器上

代码在这里：

console.clear();

import {Component, Output, ViewChild} from "@angular/core";
import {BehaviorSubject, Observable, Subject} from "rxjs/Rx";

@Component({
    selector: 'toggle-button',
    template: `<button (click)="on$.next($event)">
  <ng-content></ng-content>
</button>`
})
export class ToggleButton {
    @Output() on$ = new BehaviorSubject(true)
        .scan(acc =>!acc);
}

@Component({
    selector: 'incrementing-display',
    template: `
  {{(display$ | async)}}
`
})
export class IncrementingDisplay {
    @Output() display$ = new Subject()
        .scan((acc:number) => acc + 1)
}

@Component({
    selector: 'StreamButton',
    directives: [ToggleButton, IncrementingDisplay],
    template: `
<toggle-button #tb>
  {{(tb.on$ | async) ? "ON" : "OFF"}}
</toggle-button>
<incrementing-display #id></incrementing-display>
`
})
export class StreamButton {
    @ViewChild('tb') toggleButton;
    @ViewChild('id') incrementingDisplay;

    ngAfterViewInit() {
        this.toggleButton.on$.next(false);

        this.toggleButton.on$
            .switchMap(bool => bool ? Observable.interval(250) : Observable.empty())
            .startWith(0)
            .subscribe(this.incrementingDisplay.display$);
    }
}

TX

肖恩

Answer 1

@Input用于将数据从父组件传递/注入到子组件中。

在您的情况下，它是执行父组件可以订阅的@Output的子组件。

Answer 2

答案是因为显示$是一个主题，它可以双向进行，所以它的@Input或@Output真的无关紧要，因为它是主题的子类，并且都可以订阅...并推送到...

Angular2：输出可观察量应该是输入？惊人的代码

2 个答案: