angular - 如何将 Promise 绑定(bind)到组件属性？

Question

我有一个 promise 对象需要被解析到另一个组件，如何实现这个以便当 component-one 中的 promise 被 resolved 时，promise 对象被解析到 component-two 也能解决？

ComponentOne 摘录

@Component({
  selector: 'component-one',
  template: `
      <h1>Title</h1>
      <component-two [promisedData]="promisedData"></component-two>
    `,
  directives: [ComponentTwo]
  })
export class ComponentOne {
  promisedData: Promise<any>;

  constructor () {
    this.promisedData = new Promised(resolve => {
             setTimeout(function(){
                 resolve('Test');
              }, 1000);
    });
  }
}

ComponentTwo 摘录

@Component({
  selector: 'component-two',
  template: `
      <h2>
        {{processedData}} 
        // the {{processedData}} is undefined becaused the 
        // resolved promise doesn't get to parse to the component-two.
      </h2>
    `,
  inputs: ['promisedData']
  })
export class ComponentTwo {
  promisedData: Promise<any>;
  processedData: string;

  constructor () {
    PromisedData.then(data => this.processedData = data);  
  }
}

Answer 1

最简单的方法是像这样将 async 管道添加到您的模板中:

{{promisedData |异步}}

编辑:这是一个显示 async 管道的工作示例:plunker

Edit2:Plunker 显示 OnInit:plunker