Javascript angularjs和TypeScript中的绑定

我正在使用传统的angularjs 1.5和typescript。数据在父用户卡中更改时，未在活动用户卡中更新

家长

<active-user-card active-users="response.activeUsers"></active-user-card>

活动用户卡

export class ActiveUserCard {
  activeUsers: number;
  data: Array<IChartData>;

  constructor() {

    ........
    ........
    this.inactiveUsers = (totalUsers - this.activeUsers) || 0;

    this.data = [
      {name: "Active users",   y: this.activeUsers},
      {name: "Inactive users", y: this.inactiveUsers}
    ];
    ........
    ........
  }
}

angular.module('tm')
  .directive('activeUserCard', [function() {
    return {
      restrict: 'E',
      scope: {
        activeUsers: '<'
      },
      bindToController: true,
      controller: ActiveUserCard,
      controllerAs: 'auc',
      templateUrl: "./active-user-card.html"
    };
  }]);

导出类ActiveUserCard{
活跃用户：数量；
数据：数组；
构造函数（）{
........
........
this.inactiveUsers=（totalUsers-this.activeUsers）| 0；
此参数。数据=[
{name:“活动用户”，y:this.activeUsers}，
{name:“非活动用户”，y:this.inactiveUsers}
];
........
........
}
}
角度模块（'tm'）
.directive（'activeUserCard'，[function（）{
返回{
限制：'E'，
范围：{
activeUsers:“嗯，您正在更新
数据的地方是组件的构造函数（因此，运行一次）。使用
$onChanges
钩子

首先，如果在HTML中直接使用父数据，则使用Angular的$watch会立即反映出来

但在这里，您希望更改反映在组件的this.data变量中。您必须听取更改，然后更新this.data

$onChanges(changes) {
    if (changes.activeUsers&& changes.activeUsers.currentValue) {
      // update your code here
      // i don't know where totalusers are comigng in below but you just figure out.
       const inactiveUsers = (totalUsers - changes.activeUsers.currentValue) || 0;

       this.data = [
          {name: "Active users",   y: changes.activeUsers.currentValue},
          {name: "Inactive users", y: inactiveUsers}
      ];
    }
  }

我建议尝试重新使用代码。从构造函数中取出代码并生成方法来设置将总用户和活动用户作为参数的数据并生成数据。相同的方法应该通过changes.activeUsers.currentValue从$onChanges钩子中调用。这样代码将是干净的

谢谢