Angular2/Ionic2::重新加载组件

Question

我的根页面上有一个组件公开了一些可绑定(bind)的属性，可以像这样使用:

<myprogress [value]="current" [max]="maximum"></myprogress>

在我的应用程序中，各种类型的对象需要进度显示。所以我创建了一些指令，如下所示:

@Directive({
  selector: 'myprogress[order]'
})
export class OrderProgress {
  @Input('order') order: Order;
  constructor(private baseComponent: Progress) {}
  ngOnInit() {
    this.baseComponent.value = this.order.currentStage;
    this.baseComponent.max   = this.order.totalStages;
  }
}

这让我可以像这样替换调用:

<myprogress [value]="order.currentStage" [max]="order.totalStages"></myprogress>

更具可读性:

<myprogress [order]="order"></myprogress>

在应用程序的某些部分本身更改顺序之前，这会正常工作。在这种情况下，已经渲染的 myprogress 组件不会更新。我也明白为什么。 ngOnInit 函数在呈现组件时仅运行一次，并且无法向指令指示订单的某些属性已更改以及 value 和 max需要计算。

有没有办法解决这个问题？

我有一个可能的解决方案是:

1. 修改 Progress 组件以接受数字以及返回数字的函数。
2. 在OrderProgress的ngOnInit中，绑定(bind)如下:this.baseComponent.value = () => this.order.currentStage

但它也需要我更改 Progress 组件。有没有一种方法不需要我更改 Progress 或 Order？

Answer 1

听起来您需要在订单对象上实现一个可观察对象。如果您在多个组件之间共享该对象并且需要让这些组件知道订单对象的更改，那么最好创建一个 Observable。我们使用 rxjs 中的 BehavoirSubject 类来做到这一点。

RxJs BehaviorSubject

下面是如何创建 BehavoirSubject 的示例:

export class TokenService {

    public tokenSubject: BehaviorSubject<OpenIdToken> = new BehaviorSubject<OpenIdToken>(<OpenIdToken>{});

OpenIdToken 是我想在我的应用程序中共享的自定义 typescript 类。

这是通知订阅者底层对象发生变化的方法:

setObservableToken(token: OpenIdToken): void {
        if (token) {
            this.tokenSubject.next(token);
        }
    }

在调用 .next 之后，新的 token 对象值将传播给所有订阅者。以下是订阅 BehaviorSubject 的方式:

export class PatientComponent implements OnInit, OnDestroy {    

    patient: Patient;

    constructor(private _tokenService: TokenService, private _patientService: PatientService) { }

    ngOnInit() {
        this._tokenService.tokenSubject.subscribe(token => {
            if (token && token.access_token && token.access_token.length>0) {
                this._patientService.getPatient(token)
                    .subscribe(_patient => this.patient = _patient);
            }
        });
    }

subscribe 是一个委托(delegate)，它将在订阅广播 token 更改时执行(当它调用 .next(token) 时)。在这种情况下，当我获得 OpenIdToken 时，我想使用 token 获取患者，因此我调用了另一个服务。