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

Question

我试图弄清楚如何将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]输入将可观察对象实例本身分配给进度条，而不是发出的值。因为我无法修改子compont（ngb） - 有没有办法公开派生值而不用手动连接父组件中的.subscribe（）处理程序？

Answer 1

发送一个BehaviorSubject，然后调用asObservable（）。

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

过程：

1. 单击添加-> add（）
2. add（）-> next（itemNew）
3. [item $] =“ item $”-> @Input（）item $;
4. 更新视图

---

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
        });
    }