如何将可观察值传递给 Angular Bootstrap 组件？答案

【问题标题】：How do i pass an observable value into an Angular Bootstrap component?如何将可观察值传递给 Angular Bootstrap 组件？
【发布时间】：2017-03-30 16:06:25
【问题描述】：

我试图弄清楚如何将 Observable 值传递给子组件：

服务：

  public get percent():Observable<number> {
    return this.percentSubject.asObservable();
  }

子组件：

  <ngb-progressbar type="success" [value]="completion.percent | async" [animated]="true">{{ completion.percent | async }}%</ngb-progressbar>

文本值按预期呈现。可悲的是，[value] 输入将可观察对象实例本身分配给进度条，而不是发出的值。由于我无法修改子组件 (ngb) - 有没有办法在不手动连接父组件中的 .subscribe() 处理程序的情况下公开派生值？

【问题讨论】：

async 将订阅它获取数据并取消订阅它我认为您应该直接发送 observable 作为输入并在组件内执行异步操作
你试过把表达式放在括号里吗？ [value]="(completion.percent | async)"
@BabarBilal - 因为这是来自 ng-bootstrap.github.io 的组件 - 我在子组件内没有写入权限
在这里工作正常：plnkr.co/edit/mU9kSib2gq0s3IELhRfV?p=preview
{{ completion.percent | async }} 是否呈现为预期百分比？

标签： angular typescript rxjs ng-bootstrap

【解决方案1】：

发送一个 BehaviorSubject，然后调用 asObservable()。

//Subject 的一种变体，它需要一个初始值并在订阅时发出其当前值。

过程：

点击添加 -> add()
add() -> 下一个(itemNew)
[item$]="item$" -> @Input() item$;
更新视图

add-title.component.ts

  template: `
    <button (click)="add()">Add</button>
    <app-show-title-list [items$]="items$.asObservable()"></app-show-title-list>
  `

  items$ = new BehaviorSubject<Item>(new Item(''));
  add() {
    const itemNew = new Item(Math.random().toString());
    this.items$.next(itemNew);
  }

show-title-list.component.ts

    @Input() items$;
    ngOnInit() {
        this.items$.subscribe(item => {
          // do some
        });
    }

【讨论】：

请稍微更新你的答案，添加一些直接解决问题的解释，即“我如何传递一个可观察的”。