Angular：评估传递给组件属性的表达式

Question

如何将 Angular 表达式的值传递给组件的属性？我正在从 API 中取回价值。

app.controller.js

$http.get(apiUrl).then(function(resp) {
  $scope.name = resp.data.name;
})
...

person.component.js

export const Person = {
  templateUrl: 'person.html',
  bindings: {
      firstName: '@'
  },
  controller: function() {
      console.log(this.firstName);
  }
}

app.html

...
<person first-name="name">

由于某种原因，它没有评估name，而是在控制台中记录undefined。

有没有办法解决这个问题，让它在控制器中记录Tom？

感谢任何帮助。提前致谢！

我已经设置了一个 jsFiddle here

Answer 1

& 用于表达式，@ 用于插值字符串，所以尝试使用

firstName: '&'

然后this.firstName() 应该计算传入的表达式。

另外，firstName 不能保证在$onInit 之前已经被初始化，所以如果你这样做了

bindings: {
    firstName: '&'
},
controller: function() {
    this.$onInit = function() {
        console.log(this.firstName());
    }
}

您应该会得到预期的结果。

供参考：https://docs.angularjs.org/guide/component

$onInit() - 在元素上的所有控制器都已构造并已初始化其绑定后在每个控制器上调用

编辑：

在您提供额外信息之后，您可能应该在这种情况下使用单向绑定 (<)，因为看起来您只是在传递单个值（而不是表达式），然后您可以检测到$onChanges 的变化。我分叉了你的 jsfiddle 来展示一个潜在的解决方案：http://jsfiddle.net/35xzeo94/。