Angular2 Observables最佳做法

Question

可以说我有一个包含子组件的组件。 例如这个简单的日历：

这是它的模板：

<month-board [current-month]="currentMonth$"></month-board>
<button (click)="decrement()">Prev</button>
<button (click)="increment()">Next</button>

单击按钮时，已订阅currentMonth$的month-board currentMonth$将更改显示的月份。

currentMonth$类型是Observable<Moment> 。 我的问题是：将Observables传递给Angular2的子组件是一种好习惯吗？ 有什么更好的办法吗？

父代码完整：

@Component({
  selector: 'month-view',
  templateUrl: 'app/components/month-view/month-view.html',
  styleUrls: ['app/components/month-view/month-view.css'],
  directives: [MonthBoard],
})

export class MonthView {
  currentMonth: Moment = moment();
  currentMonth$: Observable<Moment>;
  currentMonthObserver: Observer<Moment>;
  decrement: Function;
  increment: Function;

  constructor() {
    this.currentMonth$ = Observable.create((observer: Observer<Moment>) => {
      this.currentMonthObserver = observer;
    });


    const decrementCounter$: Observable<Function> = Observable.create((observer) => {
      this.decrement = () => {
        observer.next();
      };
    });

    const incrementCounter$: Observable<Function> = Observable.create((observer) => {
      this.increment = () => {
        observer.next();
      };
    });

    this.currentMonth$.subscribe();

    Observable
      .merge(
        decrementCounter$.map(() => - 1),
        incrementCounter$.map(() => + 1)
      )
      .startWith(0)
      .scan((currentCount: number, value: number) => currentCount + value)
      .subscribe((count: number) => {
        this.currentMonthObserver.next(this.currentMonth.clone().add(count, 'M'));
      });
  }
}

儿童完整代码：

@Component({
  selector: 'month-board',
  templateUrl: 'app/components/month-board/month-board.html',
  styleUrls: ['app/components/month-board/month-board.css'],
  directives: [DayCell]
})
export class MonthBoard implements OnInit{
  @Input('current-month') currentMonth: Observable<Moment>;
  weeks: Moment[][];

  constructor(private calendarHelper: CalendarHelper) {
    this.weeks = this.calendarHelper.getMonthWeeks();
  }

  ngOnInit() {
    this.currentMonth.subscribe((month: Moment) => {
      this.weeks = this.calendarHelper.getMonthWeeks(month);
    });
  }
}

Answer 1

您可以通过这种方式完成，另一种方式是使用@input。 将值从父级传递到子级非常容易。

https://angular.io/docs/ts/latest/api/core/Input-var.html

我认为以这种方式将可观察变量传递给您的子组件并不一定很糟糕。 例如，我有一个使用可观察性的服务，整个应用程序都使用该可观察性来监视已登录的事件。 但是对于日历，您可能会发现自己想要在同一可观察对象的不同位置传递不同的值。 如果这样做，您总是可以使另一个可观察到的。 或以不同的方式对每个组件进行操作。

但是出于可读性考虑，我肯定会只使用@input，这样，我只需要转到父组件即可确定要传递的内容。