angular - 如何将可观察值传递给 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] 输入将可观察对象实例本身分配给进度条，而不是发出的值。因为我无法修改子组件 (ngb) - 有没有一种方法可以在父组件中手动连接 .subscribe() 处理程序来公开派生值？

Answer 1

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

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

过程:

1. 点击添加 -> 添加()
2. 添加() -> 下一个(itemNew)
3. [item$]="item$"-> @Input() item$;
4. 更新 View

---

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

显示标题列表.component.ts

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