Angular 组件/控制器解析 $stateprovider答案

【问题标题】：Angular Component/Controller resolve $stateproviderAngular 组件/控制器解析 $stateprovider
【发布时间】：2016-11-11 21:10:35
【问题描述】：

我正在尝试适应 Angular 的组件（来自 Angular Fullstack Generator 生成的代码）。我尝试配置路由以解决“查询”，如下所示：

angular.module('paizaApp')
  .config(function($stateProvider) {
    $stateProvider
    .state('main', {
      url: '/',
      template: '<main query="$resolve.query"></main>',
      resolve:{
        query:function(){return null;}
      },


 .state('starred',{
    url:'/users/:userId/starred',
    template: '<main query="$resolve.query"></main>',
    resolve:{
        query:function($stateParams){
          return {stars:$stateParams.userId};
        }
      }
  })
  .state('users',{
    url:'/users/:userId',
    template: '<main query="$resolve.query"></main>',
    resolve:{
      query:function($stateParams){
        return {user:$stateParams.userId}
      }
    }

以下是控制器/组件的代码。

class MainController {

    constructor($http, $scope, socket, Auth, query) {
      this.$http = $http;
      this.socket = socket;
      this.awesomeThings = [];

      $scope.isLoggedIn = Auth.isLoggedIn;
      $scope.getCurrentUser = Auth.getCurrentUser;

   $onInit() {
      this.$http.get('/api/things',{params:{query:query}})
        .then(response => {
          this.awesomeThings = response.data;
          this.socket.syncUpdates('thing', this.awesomeThings);
        });
    }////////
////////////////////////////////////// etc..


  angular.module('paizaApp')
    .component('main', {
      templateUrl: 'app/main/main.html',
      bindings:{query:'='},
      controller: MainController

    });

我收到一条错误消息 - 未知查询提供程序。但是，如果我从构造函数中删除查询，则错误消息是“未定义查询”。你能看看我哪里出错了，我是否应该将“查询”变量注入控制器？我是 Angular 1 的新手，更不用说 Angular 2。

更新：我也尝试过类似的方法，但没有奏效：

angular.module('paizaApp')
  .config(function($stateProvider) {
    $stateProvider
    .state('main', {
      url: '/',
      template: '<main></main>',
      resolve:{
        query:function(){return null;}
      },
      controller:function($scope,query){
        $scope.query=query
      }

还有：

angular.module('paizaApp')
    .component('main', {
      templateUrl: 'app/main/main.html',

      controller: MainController,
      scope:{query:'='}

    });

【问题讨论】：

标签： angularjs controller components resolve

【解决方案1】：

您不应该在控制器 constructor 上注入 query。如果您已将 MyController 指定为状态控制器，您可以这样做。

query 解析已在组件 bindings 中传递。可以直接在this.query里面得到queryresolve的值

【讨论】：

我将所有对查询的引用更改为控制器函数内的 this.query 并且它起作用了。谢谢！
说得太早了。错误消息消失了，但 this.query 返回未定义。我仍然需要找出解析查询的值是如何进入控制器函数的
@AAllen 我可以看到值应该是null，对吗？
它应该返回 null 而不是 undefined。我还有其他路线，我要添加到上面的代码中，这些路线应该返回值......