为什么我的组件绑定在其控制器中未定义？

我正在写一个简单的角度分量。我将参数作为绑定传递并在屏幕上显示其值。一切正常：我可以看到该参数显示在屏幕上。

零件：

var app = angular.module("test", []);
app.component("test", {
  bindings: {
    "contactId": "<"
  },
  controllerAs: "model",
  controller: () => {
    //output: 'contact id from controller: undefined'
    console.log(`contact id from controller: ${this.contactId}`);
  },
  template: "<div>Contact id from view: {{model.contactId}}</div>"
});

HTML：

<test contact-id="8"></test>

但是，当我尝试从控制器内部访问绑定时（请参阅console.log），绑定值为undefined。我不明白如何在视图中使用它，但在控制器中却不可用。

我究竟做错了什么？

这是说明问题的plnkr。

使用angular的组件时，有时还没有通过内部链接将控制器连接起来。如果试图在控制器的构造函数中执行此操作，则尚未链接到绑定。Component API公开了一些生命周期挂钩，您可以定义这些挂钩在特定时间触发。您正在寻找$onInit钩子。

$ onInit（）-在构造一个元素上的所有控制器并初始化它们的绑定之后（并且在此元素上的指令的链接前和链接后），在每个控制器上调用。这是放置控制器初始化代码的好地方。

每个文档-https: //docs.angularjs.org/guide/component

确保在HTML中使用连字号进行绑定，在Javascript中使用camelCase进行绑定。

app.component("test", {
  bindings: {
    "myContactId": "<"
  }
}

<test my-contact-id="8"></test>

那就是我总是忘记做的事。

的值contactId可$scope在您的控制器中使用：

var app = angular.module("test", []);
app.component("test", {
  bindings: {
    "contactId": "<"
  },
  controllerAs: "model",
  controller: ($scope) => {
    var model = $scope.model;
    alert(`contact id from controller: ${model.contactId}`);
  },
  template: "<div>Contact id from view: {{model.contactId}}</div>"
});

在此处链接到您的Plunker的另一个版本。

关键字this似乎不适用于箭头功能，而与

controller: function() {
   alert('contact id from controller: ' + this.contactId);
}

使用箭头功能时，this似乎是指窗口对象，因为

箭头函数不会创建它自己的上下文，而是捕获封闭上下文的this值

我将建议一些更改，这些更改是您真正需要避免这些异常错误的。

app.component("test", {
  bindings: {
    "myContactId": "<"
  },
  controller:function(){
   var self=this;
   this.$onInit=function(){
    // do all your initializations here.
    // create a local scope object for this component only. always update that scope with bindings. and use that in views also.

       self.myScopeObject=self.myContactId
   }
  },
   template:'<p>{{$ctrl.myScopeObject}}</p>'
 }

<test my-contact-id="8"></test>

一些要点：

1. 将绑定传递到html中的组件总是要经过mybaby-case my-contact-id进行的，而其相应的javascript变量将为cammal cased：myContactId。

2. 如果要传递对象的值，请在绑定中使用“ @”。如果您正在使用一个对象并将该对象传递给绑定，请使用'<。如果要对该对象进行2次绑定，请在绑定配置中使用'='

 bindings:{
      value:'@',
      object:'<', // also known as one-way
      twoWay:'='
    }

也许这不是最佳做法，但是您可以更轻松地访问这些值：

$scope.$ctrl.contactId

您可以在$ scope的$ ctrl属性中获取所有绑定。

希望对您有所帮助

对于那些使用伪指令的人（假定使用组件），如果指定bindings {}，则将那些相同的参数添加到scope {}的工作似乎是：

/*bindings: {
    modalInstance: '<',
    resolve: '<'
},*/
scope: {
    modalInstance: '<',
    resolve: '<'
},

*在我写完上面的内容后发现，在我从$ scope.resolve分配它之前，在$ scope上没有可用的附加范围参数foo。因此，我必须在$ scope.init（）中执行此操作：$ scope.foo = $ scope.resolve.foo。不知道为什么。猜猜这与我的UI Bootstrap Modal + Directives使用有关

这对于其他人可能是显而易见的，但是对我而言，对于AnguluarJS而言并不是一个新手。

我的问题是使用带有UI-Bootstrap Modals的指令，这些指令与指令兼容，但已设计并记录为可与组件一起使用。

我将为@jusopi和接受的答案添加另一个答案，仅供可能遇到我问题的人使用。关于组件，即使经过$onInit钩子，我的数据仍然为空，因为仍未收到来自服务器的值。为了解决这个问题（尽管可能有更好的方法来处理这种情况），我也利用了$onChanges挂钩。$onChanges会在传递时返回已更改的数据，您可以解析该信息，也可以简单地将其称为this.contactId，它将被更新。

文档中提供了更多详细信息：https : //docs.angularjs.org/guide/component

代码有两个问题，导致“未定义”错误。

1. 如上所述，应该首先到达$ onInit生命周期钩子，在完成所有绑定后会触发onInit。

从官方文档：AngularJs文档

$ onInit（）-在构造一个元素上的所有控制器并初始化其绑定之后（并且在此元素上的指令的链接前和链接后），在每个控制器上调用。这是放置控制器初始化代码的好地方。

2. 您可能遇到的第二个问题是，使用“（）=>”箭头符号作为控制器功能的参数时，控制器将无法达到生命周期挂钩。

问题在于箭头表示法没有它自己的作用域，而是使用它的封闭范围。意味着使用“ this”时将引用窗口对象而不是组件。因此调用this。$ onInit（）将在窗口上调用，并且不会被触发，因为它在窗口上不存在。