web-dev-qa-db-fra.com

Comment obtenir les données de route actuelles dans Angular 5

Dans ma situation actuelle, je mets data object dans mon composant de chargement paresseux et je souhaite obtenir du contenu data et l'afficher dans le code HTML. Mais je ne pouvais pas le faire. Voici le script:

const routes: Routes = [
    {
        path: '',
        component: CancellationComponent,
        data: {
            animation: 'cancellation',
            title: 'Cancelamento de contratos'
        },
        resolve: {
            data: CancellationResolveService
        }
    }
];

Le composant est chargé par Lazy Load. Ce que je veux, c’est que, lorsque j’accède directement au #/cancellation, je souhaite obtenir le data content, quel est le meilleur moyen? Une idée? Merci beaucoup!

angulartypescripteventsroutesrouter
2
Chiien

Vous pouvez accéder à la propriété de données de l'itinéraire à partir de l'instantané de la manière suivante:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
    templateUrl: './app/home/welcome.component.html'
})
export class WelcomeComponent implements OnInit {
    public pageTitle: string;

    constructor( private route: ActivatedRoute) {
    } 

    ngOnInit(): void {
     this.pageTitle = this.route.snapshot.data['title'];
  }

}

Cela nécessite l'injection de ActivatedRoute, puis l'accès à l'instantané de la route. Vous pouvez utiliser l'instantané au lieu de vous abonner car les données sont statiques.

J'espère que cela t'aides.

9
DeborahK

Selon l'endroit où vous souhaitez l'utiliser, Mais s'il est élevé, vous pouvez essayer:

constructor(private router: Router,
            private activatedRoute: ActivatedRoute)

Vous détecterez chaque changement d'itinéraire et obtiendrez les données dans l'itinéraire.

router.events.pipe(
      filter(event => event instanceof NavigationEnd), // Only get the event of NavigationEnd
      map(() => activatedRoute), // Listen to activateRoute
      map(route => {
        while (route.firstChild) {
          route = route.firstChild;
        }
        return route;
      }),
      filter(route => route.outlet === 'primary'),
      mergeMap(route => route.data)  // get the data
    )
1
Wandrille

ActivatedRoute possède une propriété de données

0
Timothy