javascript - 为什么我的组件绑定(bind)在其 Controller 中未定义？

Question

我正在编写一个简单的 Angular 组件。我将一个参数作为绑定(bind)传递并在屏幕上显示它的值。一切正常:我可以看到屏幕上显示的参数。

组件:

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>

但是，当我尝试从 Controller 内部访问绑定(bind)时(请参阅 console.log)，绑定(bind)值为 undefined。我不明白它如何在 View 中可用，但在 Controller 中不可用。

我做错了什么？

这是一个 plnkr说明问题。

Answer 1

当使用 Angular 的组件时，有一点 Controller 没有通过内部链接连接起来。如果您尝试在 Controller 的构造函数中执行此操作，则您还没有链接 到绑定(bind)。组件 API 公开了一些您可以定义的生命周期 Hook ，这些 Hook 将在特定时间触发。您正在寻找 $onInit Hook 。

$onInit() - Called on each controller after all the controllers on an element have been constructed and had their bindings initialized (and before the pre & post linking functions for the directives on this element). This is a good place to put initialization code for your controller.

根据文档 - https://docs.angularjs.org/guide/component