角度コンポーネント/コントローラを解決する$ stateprovider

Question

Angularのコンポーネント（Angular Fullstack Generatorで生成されたコードから）に適応しようとしています。 Iは、以下の通り「クエリ」を解決するためにルートを設定しようとした：

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.module('paizaApp') 
    .component('main', { 
     templateUrl: 'app/main/main.html', 

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

    }); 

Answer 1

shouldn：私もこのような何かを試してみましたが、うまくいきませんでした：

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 
     } 

そして、私は角2

アップデートはもちろんのこと、1角に新しいですコントローラconstructorにqueryを注入してください。状態のコントローラーとしてMyControllerを指定した場合は、そうすることができます。

query解決は既にコンポーネントbindingsに渡されています。 queryの値を直接取得することができますthis.query