Решить с помощью UI Router и передать контроллеру компонента

Как разрешить переменную с помощью UI Router, когда я использую компонент.

Это маршрут:

$stateProvider
  .state('route', {
    url: '/route',
    template: '<my-component user="user"></my-component>',
    resolve: {
      user: (Auth) => {
        return Auth.getCurrentUser().$promise;
      }
    }
  })

Это компонент:

(function () {

   class BookingListComponent {
     constructor(user) {
        //I want to use the user here but getting the unknown provider error
     }

  }

  angular.module('app')
    .component('myComponent', {
      templateUrl: 'my-url.html',
      controller: MyComponent,
      bindings: {
      user: '<'
      }
    });

})();

Использование Angular 1.5 и yoman angular-fullstack


angularjs angular-ui-router angular-fullstack
person Mika    schedule 15.08.2016    source источник
comment
Возможно, вам потребуется определить контроллер для вашего маршрута, чтобы пользовательскую переменную можно было привязать к области видимости.   -  person Todd Miller    schedule 15.08.2016
comment
связанный Как проверить значение разрешения маршрута Angularjs для компонента?   -  person Édouard Lopez    schedule 24.11.2016

Ответы (1)


arrow_upward
4
arrow_downward

Вам нужно будет выполнить одно из следующего:

  1. Создайте контроллер для состояния и привяжите разрешенное значение к $scope.
  2. Привяжите ссылку Auth.getCurrentUser() к $rootScope, чтобы она была доступна для каждого состояния.

Пример для подхода №1:

.state('route', {
    url: '/route',
    template: '<my-component user="user"></my-component>',
    controller: ($scope, user) => { $scope.user = user; },
    resolve: {
      user: (Auth) => {
        return Auth.getCurrentUser().$promise;
      }
    }
});

Пример для подхода № 2:

.run(($rootScope, Auth) => {
 //This does NOT replace the resolve in your state definition but for this to work,
 //Auth.getCurrentUser() must NEVER return null.
 $rootScope.user = Auth.getCurrentUser();
});

Дальнейшее объяснение подхода № 2:

Каждый $scope будет наследоваться от $rootScope, поэтому, пока $rootScope.user указывает на фактический объект, дочерние области будут указывать на тот же объект.

лучшей практикой, если вы решите использовать вариант 2, является привязка объекта пользователя к свойству определенного объекта на $rootScope, чтобы избежать каких-либо проблем:

.run(($rootScope, Auth) => {
     $rootScope.data = {
      //Now user can be null.
      user: Auth.getCurrentUser()
      //Other shared data...
     }
});

Но тогда вам придется обновить свой шаблон, чтобы использовать data.user.

РЕДАКТИРОВАТЬ:

Я нашел этот пример в документах, может пролить немного света на проблему:

angular.module('myMod', ['ngRoute']);
.component('home', {
  template: '<h1>Home</h1><p>Hello, {{ $ctrl.user.name }} !</p>',
  bindings: {
    user: '<'
  }
})
.config(function($routeProvider) {
  $routeProvider.when('/', {
    //Notice $resolve?
    template: '<home user="$resolve.user"></home>',
    resolve: {
      user: function($http) { return $http.get('...'); }
    }
  });
});
person Muli Yulzary    schedule 16.08.2016
comment
Извините, я не заметил этого, но да, это, скорее всего, так. Я заметил, что вы используете одностороннюю привязку. - person Muli Yulzary; 16.08.2016
comment
Этот ответ удивителен. Я упустил тот факт, что контроллер маршрута применяется к шаблону, и это отдельно от того, что рендерит компонент, у которого также есть контроллер. - person Mika; 16.08.2016