Question

我的根页面上有一个组件，它暴露了一些可绑定的属性，可以像这样使用：

<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的新值需要计算。

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

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

修改Progress组件以接受数字以及返回数字的函数。
在OrderProgress＆＃39; ngOnInit中，绑定如下：this.baseComponent.value = () => this.order.currentStage

但它也要求我更改Progress组件。有没有办法不要求我改变Progress或Order？

Answer 1

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

RxJs BehaviorSubject

以下是如何创建BehavoirSubject的示例：

export class TokenService {

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

OpenIdToken是一个自定义的打字稿类，我想在我的应用程序中共享。

以下是如何通知订阅者对基础对象的更改：

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

在.next被调用之后，新的令牌对象值将提升给所有订阅者。以下是您订阅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是一个委托，当订阅广播对令牌的更改时（当它调用.next（令牌）时）将执行该委托。在这种情况下，当我得到一个OpenIdToken时，我想使用令牌获取患者，所以我打电话给另一个服务。

Answer 2

订单类型必须是Subject或BehaviorSubject，因此当您更新订单时，myprogress的模板也应该更新。您需要使用异步管道来订阅observable。

<myprogress [order]="order$ | async"></myprogress>

检查此代码。您需要致电this.newOrder({...});来更新订单。

@Component({
  selector: 'page-home',
  template: `
    <ion-header>
      <ion-navbar>
        <ion-title>Home</ion-title>
      </ion-navbar>
    </ion-header>

    <ion-content padding>
       <myprogress [order]="order$ | async"></myprogress> 
    </ion-content>
 `
})
export class HomePage implements OnInit,OnDestroy{

  order$: Subject<any> = new Subject();

  constructor(public navCtrl: NavController){
  }

  ngOnInit(){
  }

  newOrder(order : any){
    this.order$.next(order);
  }

  ngOnDestroy(){
    this.order$.unsubscribe();
  }

}

Angular2 / Ionic2 ::重新加载组件

2 个答案: