Vraag angular ui-router: krijg $ state info van toState in resolve


Bijwerken: dit zou in angular-ui-router vanaf nu mogelijk moeten zijn 1.0.0alpha0. Zie de release-opmerkingen https://github.com/angular-ui/ui-router/releases/tag/1.0.0alpha0 en het probleem https://github.com/angular-ui/ui-router/issues/1018 Ik maakte.

Ik zou graag toegang krijgen tot de naam van de staat en andere attributen die de app gebruikt voor het gebruik van angular ui-routers bij het werken aan de oplossing.

De reden: ik wil sommige gebruikersgegevens (inclusief hun toegangsrechten) asynchroon laden voordat de app die pagina mag invoeren.

Op dit moment is dit niet mogelijk omdat het injecteren van $ state in de oplossingspunten naar de staat die je navigeert weg staat, niet naar degene naar waar je naartoe navigeert.

Ik weet dat ik het kan:

  • haal de toState ergens anders op met $ rootScope ('$ stateChangeStart') en sla het bijvoorbeeld op in mijn instellingenservice. Maar ik vind het een beetje rommelig.
  • harde code de staat in de oplossing, maar ik wil mijn vastberadenheid voor alle pagina's niet opnieuw gebruiken

Ik heb ook een probleem gemaakt op de giteboom van de ui-router (alsjeblieft + 1 als je geïnteresseerd bent!): https://github.com/angular-ui/ui-router/issues/1018

Hier is mijn code tot nu toe. Alle hulp op prijs gesteld!

.config(function($stateProvider) {

    $stateProvider.state('somePage', {
        // ..
        resolve: {
            userData: function($stateParams, $state, Settings) {
                return Settings.getUserData() // load user data asynchronously
                    .then(function (userData) {
                        console.log($stateParams);
                        console.log($state);
                        // Problem: $state still points to the state you're navigating away from
                    });
            }
        }
    });
});

45
2018-04-10 10:53


oorsprong


antwoorden:


Update voor Ui-router 1.x

$provide.decorator('$state', ($delegate, $transitions) => {
    $transitions.onStart({}, (trans) => {
      $delegate.toParams = trans.params()
      $delegate.next = trans.to().name
    })
    return $delegate
  })

Ui-router 0.x

Je kunt altijd decoreren $state met next en toParams eigenschappen:

angular.config(function($provide) {
  $provide.decorator('$state', function($delegate, $rootScope) {
    $rootScope.$on('$stateChangeStart', function(event, state, params) {
      $delegate.next = state;
      $delegate.toParams = params;
    });
    return $delegate;
  });
});

En gebruik als zodanig:

.state('myState', {
    url: '/something/{id}',
    resolve: {
        oneThing: function($state) {
            console.log($state.toParams, $state.next);
        }
    }
});

55
2017-12-02 17:56



Dus ik ontdekte het antwoord hierop zelf. Als je code zich gedraagt ​​zoals de mijne, wordt het $ stateParams-object correct geïnjecteerd, maar de $ -status is een leeg (of oud) statusobject.

Wat voor mij werkte, was refereren this in de oplossingsfunctie:

.state('myState', {
    url: '/something/{id}',
    templateUrl: '/myTemplate.html',
    controller: function() {},
    resolve: {
        oneThing: function($stateParams) {
            console.log($stateParams); // comes through fine
            var state = this;
            console.log(state); // will give you a "raw" state object
        }
    }
})

Het eerste logboek retourneert wat u zou verwachten. Het tweede logboek retourneert een object 'onbewerkt' (bij gebrek aan een betere term). Dus om bijvoorbeeld de naam van de staat te krijgen, hebt u toegang tot this.self.name.

Ik besef dat dit niet de voorkeur heeft ... het zou een stuk leuker zijn als $state (of een ander gestandaardiseerd object) zou deze informatie voor ons kunnen geven bij het oplossen, maar dit is de beste die ik kon vinden.

Hoop dat helpt ...


31
2018-04-15 15:51



this.toString () geeft je de naam van de staat


1
2017-08-04 16:27