web-dev-qa-db-fra.com

Angular 2+: comment accéder à la route active en dehors de la sortie du routeur

J'ai une application Angular 5.

J'ai le code suivant dans mon composant d'application.

Je souhaite masquer la barre de navigation et la barre supérieure pour des itinéraires particuliers.

Est-il possible d'obtenir l'itinéraire actuellement activé dans app.component.ts? si c'est le cas, comment ?

Si ce n'est pas possible, existe-t-il une solution pour résoudre ce problème (en utilisant des gardes ou quoi que ce soit d'autre ...)?

enter image description here

Gardez également à l'esprit qu'il doit être réactif. lorsque je passe à un autre itinéraire, la barre latérale et la barre de navigation devraient s'afficher à nouveau.

angularangular-router
13
Badis Merabet

Essaye ça:

dans app.component.ts

import { Component } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { filter, map, mergeMap } from 'rxjs/operators';
import { Observable } from 'rxjs/Observable';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
  showSidebar$: Observable<boolean>;
  private defaultShowSidebar = true;

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
  ) {
    this.showSidebar$ = this.router.events.pipe(
      filter(e => e instanceof NavigationEnd),
      map(() => activatedRoute),
      map(route => {
        while (route.firstChild) {
          route = route.firstChild;
        }
        return route;
      }),
      mergeMap(route => route.data),
      map(data => data.hasOwnProperty('showSidebar') ? data.showSidebar : this.defaultShowSidebar),
    )
  }

app.component.html

<aside *ngIf="showSidebar$ | async">Sidebar here</aside>

<router-outlet></router-outlet>

<a routerLink="/without-sidebar">Without sidebar</a>
<a routerLink="/with-sidebar">With sidebar</a>
<a routerLink="/without-data">Without data.showSidebar</a>

itinéraires d'application

RouterModule.forRoot([
  { path: 'with-sidebar', component: WithSidebarComponent, data: { showSidebar: true } },
  { path: 'without-sidebar', component: WithoutSidebarComponent, data: { showSidebar: false } },
  { path: 'without-data', component: WithoutDataComponent },
])

Vous pouvez le modifier à votre guise.

Démo en direct

10
Tomasz Kula

Sûr. vous pouvez filtrer les événements du routeur et obtenir uniquement des itinéraires activés, puis vous pouvez trouver des informations sur chaque itinéraire à l'intérieur (désolé, je ne peux pas vraiment le dire pour le moment, mais si je me souviens bien, vous ne devriez obtenir que des itinéraires "activés maintenant", qui ressemble à ce que vous cherchez):

constructor(private _router: Router) {
  _router.events
    .filter(event => event instanceof NavigationEnd) 
    .forEach(item => {
      console.log(item);
      console.log(_router.routerState.root);
      console.log(_router.routerState.root.firstChild);
    });
}
1
Commercial Suicide

Pour obtenir l'itinéraire actif sans vous abonner aux événements du routeur, vous pouvez simplement utiliser une boucle while de manière récursive pour trouver l'enfant le plus bas.

private getActivatedRoute(): ActivatedRoute {
    let route = this.router.routerState.root;
    while (route.firstChild) {
        route = route.firstChild;
    }
    return route;
}
1
asdf