角$ routeProvider解決不使數據立即可用的組件控制器

Question

我有要求這裏看到了一些數據之前執行的路線解決的途徑提供：

$routeProvider.when("/", { 
    template: '<home message="$resolve.getMessage"></home>', 
    resolve: { 
     getMessage: getMessage 
    } 
}) 

數據，然後傳遞給我的家庭成分是由允許從控制器訪問它綁定，在這裏看到：

.component('home', { 
    templateUrl: '/app/content/home.component.html', 
    bindings: { 
     message: '=' 
    }, 
    controller: 'HomeController' 
}); 

當從消息試圖直接訪問數據時，控制器的負載（這是我的印象是，控制器沒有按」執行它的代碼直到routeProvider中的解析函數解析...）我想出了一個未定義的變量。

function HomeController() { 
    var vm = this; 
    console.log(vm.message); //undefined 
    setTimeout(function() { 
     console.log(vm.message); //properly defined 
    }, 1000); 
} 

超時函數中的代碼正確執行數據。我再次受到這樣的印象：在收到解決承諾的數據之前，Controller代碼才被調用/執行。我覺得我必須用這個邏輯來犯錯誤。

任何人都可以提供有關數據爲什麼延遲到組件控制器的信息，即使使用解決方案嗎？

謝謝！

Answer 1

我假設你使用的是角度爲1.6的版本，其中的綁定變得未定義。

您必須使用$onInit方法來訪問綁定。

function HomeController() { 
    var vm = this; 
    console.log(vm.message); //undefined 
    vm.$onInit = function(){ 
    // Angular 1.6 onwards, bindings will only be accessible in $onInit method 
    console.log(vm.message); // binding value after resolve 
    }; 
} 

從https://docs.angularjs.org/guide/component

$的OnInit（） - 預&交聯功能之前已經被構造之後所有的 元件上的控制器，並其綁定初始化（和 調用每個控制器上對於這個 元素的指令）。這是爲您的 控制器設置初始化代碼的好地方。

Answer 2

因爲您致電$resolve。你不應該在你的html中調用它。

定義這是使用服務與解決控制器：

$routeProvider.when("/", { 
    template: '<home message="homeMessage"></home>', 
    controller : 'MyRouteController', 
    resolve: { 
     message : getMessage 
     //getMessage can be async 
    } 
}) 


app.controller("MyRouteController", function ($scope, message) { 
    $scope.homeMessage = message; 
}); 

現在你可以把它送到你的組件。

信息

我建議這種情況下使用templateUrl。

如果您的路線是「/家」然後將其命名，如：

controller : HomeController 
templateUrl : 'home.html' 

如果您想使用組件顯示回家的消息然後將其命名，如：

component : home-message.component.js 
controller : HomeMessageController 
templateUrl : 'home-message.html' 

不要忘記：路由控制器和組件控制器是不同的！