web-dev-qa-db-fra.com

Accéder au nom de la route en cours depuis un contrôleur ou un composant

Je dois appliquer une classe "active" à un onglet d'amorçage en fonction du nom de la route actuelle. L'objet route contient "routeName" mais comment puis-je y accéder depuis un contrôleur ou un composant?

ember.js
8
jax

Pour Ember 2, depuis un contrôleur, vous pouvez essayer:

appController: Ember.inject.controller('application'),
currentRouteName: Ember.computed.reads('appController.currentRouteName')

Ensuite, vous pouvez le transmettre à composant.

3
Diogo Alves

Utilisez cette this.controllerFor('application').get('currentRouteName');

10
blessenm

En fait, vous n'avez pas besoin d'appliquer la classe active par vous-même. Un assistant link-to le fera pour vous.

Voir ici :

{{link-to}} appliquera un nom de classe CSS "actif" lorsque l'itinéraire actuel de l'application correspond au nom de route fourni. Par exemple, si l'itinéraire actuel de l'application est 'photoGallery.recent', utilisez le code {{link-to}} suivant:

{{#link-to 'photoGallery.recent'}}
  Great Hamster Photos
{{/link-to}}

aura pour résultat

<a href="/hamster-photos/this-week" class="active">
  Great Hamster Photos
</a>
5
Jeffrey C

Dans le cas absolument désespéré, vous pouvez rechercher le routeur ou le contrôleur d'application (qui expose une propriété 'currentRouteName') via this.container.lookup("router:main") ou this.container.lookup("controller:application") à partir du composant.

Si c’était une tendance commune pour moi, je créerais un service CurrentRouteService et l’injecterais dans mon ou mes composants afin que je puisse me moquer des choses plus facilement lors de mes tests.

Il pourrait également y avoir une meilleure réponse, mais le conteneur container.lookup () devrait faire tomber votre bloqueur actuel.

3
Nick Williams

Depuis Ember 2.15, vous pouvez le faire via le service de routeur public.

router: service(),
myRouteName: computed('router.currentRouteName', function () {
    return this.get('router.currentRouteName') + 'some modification';
}

https://www.emberjs.com/api/ember/release/classes/RouterService

Ce qui a très bien fonctionné pour moi puisque je voulais quelque chose calculé à partir de la route actuelle. Le service expose currentRouteName , currentURL , location et rootURL .

currentURL contient les paramètres de la requête, mais vous devrez les analyser à partir de l'URL.

1
user3381840

Essaye ça.

export default Ember.Route.extend({
  routeName: null,
  
  beforeModel(transition){
    //alert(JSON.stringify(transition.targetName) + 'typeof' + typeof transition.targetName);
    this.set('routeName', transition.targetName);
  },
  model(){

   // write your logic here to determine which one to set 'active' or pass the routeName to controller or component
  }

`

1
Maharaj Santhir

En utilisant les informations tirées de la réponse de @ maharaja-santhir, vous pouvez définir la propriété routeName du contrôleur cible à utiliser, par exemple, dans le modèle de la cible. De cette façon, il n'est pas nécessaire de définir la logique dans plusieurs emplacements et donc de réutiliser le code. Voici un exemple de réalisation:

// app/routes/application.js
export default Ember.Route.extend({
    ...

    actions: {
        willTransition(transition) {
            let targetController = this.controllerFor(transition.targetName);
            set(targetController, 'currentRouteName', transition.targetName);
            return true;
        }
    }
});

La définition de cette action willTransition dans la route de l’application permet de propager le nom de la route en cours à n’importe où dans l’application. Notez que le contrôleur cible conservera le paramètre de propriété currentRouteName même après avoir quitté un autre itinéraire. Cela nécessite un nettoyage manuel, si nécessaire, mais cela peut être acceptable en fonction de votre implémentation et de votre cas d'utilisation.

0
ashraf