与类的角度绑定答案

【问题标题】：Angular bindings with classes与类的角度绑定
【发布时间】：2017-09-25 18:26:21
【问题描述】：

带有 es6 类的 angular 给我带来了麻烦，我在任何地方都找不到关于使用它的文档。我有这个控制器

class AController {
  conversation: any;

  constructor() {
    'ngInject';
  }

  $onInit() {
    console.log(this.conversation) // This is undefined.
  }
}

我有这个组件

export const AComponent = function () {
  return {
    template: require('./attachments.component.jade'),
    bindings: {
      conversation: '<'
    },
    controller: AController,
    controllerAs: '$ctrl'
  };
}

这在模板中。 conversation 存在于此处。

attachments(conversation='conversation')

模板和控制器正在工作，但 this.conversation 未定义。无法弄清楚出了什么问题。

【问题讨论】：

该模板的控制器正在使用 $scope，因此 $ctrl.conversation 将不起作用
这看起来像 TypeScript，而不是 ES6？
你是对的，对不起。改了。
有关 AngularJS 和 ES6 的文档，请参阅 Todd Moto: AngularJS styleguide (ES2015)
您试图传递的属性值'conversation' 是来自某个控制器范围的字符串还是变量？如果您尝试传递字符串，请将其用引号括起来或将绑定更改为 @ 而不是 <

标签： javascript angularjs typescript angularjs-directive

【解决方案1】：

一切看起来都正确，只是在调用 $onInit 时可能还没有定义 this.conversation。

您可以检查conversation 是否在$onChanges 中定义，或者使用更高级别的抽象，如ngcomponent 并检查this.props.conversation 是否在其render() 方法中定义。

【讨论】：

【解决方案2】：

使用$onChanges 生命周期钩子查看来自单向绑定的值：

class AController {
  conversation: any;

  constructor() {
    'ngInject';
  }

  $onInit() {
    //console.log(this.conversation) // This is undefined.
  }

  $onChanges(changes) {
      if (changes.conversation) {
          console.log(changes.conversation.currentValue);
      }
  }
}

生命周期钩子

$onChanges(changesObj) - 每当单向 (<) 或插值 (@) 绑定更新时调用。 changesObj 是一个散列，其键是已更改的绑定属性的名称，值是{ currentValue, previousValue, isFirstChange() } 形式的对象。使用此钩子触发组件内的更新，例如克隆绑定值以防止外部值的意外突变。请注意，这也会在您的绑定初始化时调用。

— AngularJS Comprehensive Directive API Reference (Life-Cycle Hooks)

【讨论】：