如何正确地将道具传递给Angular 4中带有RxJS的组件？

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

@Component({
  selector: 'app-parent',
  template: `
    <app-child [props]="props$ | async"></app-child>
  `
})
export class ParentComponent {
  props$ = new Subject<string>();

  constructor() {
    // 将道具数据发送到Observable对象中
    this.props$.next('道具数据');
  }
}

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

@Component({
  selector: 'app-child',
  template: `
    <h1>子组件</h1>
    <p>接收到的道具数据：{{ props }}</p>
  `
})
export class ChildComponent {
  @Input() props: string;
}