编辑：

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/。

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

1 个答案:

编辑：