AngularJs 1.5 ES6：控制器中未定义的绑定

Question

传递给组件的绑定在 html 中有效，但在控制器中未定义。

<hero value="foo"></hero>

hero.component.js

import template from './hero.html';
import controller from './hero.controller';

let heroComponent = {
  restrict: 'E',
  bindings: {
    value: '@'
  },
  template,
  controller
};

HeroController.js

class HeroController {
  constructor() {
    this.name = 'hero';
    console.log(this.value); // undefined!
  }
}

hero.html

<section class="hero">
  <h1>AngularJs ES6 Example</h1>
  <!-- Value is works within template -->
  <h3>You can find me inside {{ $ctrl.name }}.html {{ $ctrl.value }}</h3>
</section>

我正在使用 angular 版本 1.5.0

Answer 1

不太可能在构造函数调用期间解析绑定。 angular 内部所做的是实例化控制器并在调用构造函数时注入依赖项。然后，填充绑定。

您应该改用生命周期挂钩 $onInit 或 $onChanges。查看开发人员指南 here（关于生命周期挂钩的相关部分大约位于页面的一半）。

Answer 2

它是未定义的，因为值是在 api 调用后加载的，使用 ng-if 解决了问题

<hero ng-if="$ctrl.value" value="$ctrl.value"></hero>

AngularJs 1.5 ES6：控制器中未定义的绑定

AngularJs 1.5 ES6: bindings undefined in controller

angularjs

es6-class

angular-components