構造時的角度組件綁定

Question

我有一個組件：

import template from './login.html';
import controller from './login.controller';
import './login.less';

let loginComponent = {
  restrict: 'E',
  bindings: {
    redirect: '@'
  },
  template,
  controller,
  controllerAs: 'vm'
};

export default loginComponent;

哪個使用基本控制器：

import angular from 'angular';

let LoginController = [
    'AuthService',
    '$resource',
    '$state',
    'config',
    (AuthService, $resource, $state, config) => {
        var vm = {
            redirect: ''
        };

        var initialize = () => {
            if (AuthService.authenticated()) {
                loginSuccess();
            }
        };

        var loginSuccess = () => {
            console.log(vm.redirect);
            if (vm.redirect) {
                $state.go(vm.redirect);
            }
        };

        initialize();
        return vm;
    },
];

export default LoginController;

問題是redirect屬性在構造時不可用（調用initialize方法時）。 如何在控制器構造期間訪問此屬性？ 如果沒有辦法，那么觀察此屬性變為可用的最佳方法是什么，然后調用initialize函數？

---

解：

$onInit正是我想要的方法。 這是未來用戶的校正控制器：

import angular from 'angular';

let LoginController = [
    'AuthService',
    '$resource',
    '$state',
    'config',
    (AuthService, $resource, $state, config) => {
        var vm = {
            redirect: ''
        };

        vm.$onInit = () => {
            if (AuthService.authenticated()) {
                loginSuccess();
            }
        };

        var loginSuccess = () => {
            console.log(vm.redirect);
            if (vm.redirect) {
                $state.go(vm.redirect);
            }
        };

        return vm;
    },
];

export default LoginController;

Answer 1

由於Angular指令鏈接的工作方式，您無法訪問控制器構造中的綁定。

它將在指令中的link函數，組件（指令的糖語法）中可用，它在magic $onInit控制器方法中可用：

在構造了元素上的所有控制器並初始化它們的綁定之后（以及在該元素上的指令的前后鏈接函數之前），在每個控制器上調用。 這是為控制器放置初始化代碼的好地方。

列出的控制器的問題是它使用箭頭功能而不是常規功能。 控制器是控制器構造函數的實例，並提供this上下文。

沒有必要發明initialize方法，應該是this.$onInit現在。