1. ホーム
  2. javascript

なぜコンポーネントのバインディングはコントローラで未定義なのですか?

2023-11-13 09:41:30

質問

簡単なアンギュラーコンポーネントを書いています。私はバインディングとしてパラメータを渡し、その値を画面に表示しています。すべて正常に動作しています。パラメータが画面に表示されているのが確認できます。

コンポーネントです。

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() - ある要素のすべてのコントローラが構築され、 バインディングが初期化された後 (そしてこの要素のディレクティブの pre & post リンク関数の前) に、それぞれのコントローラでコールされます。これは、コントローラの初期化コードを置くのによい場所です。

ドキュメントによると https://docs.angularjs.org/guide/component