typescript - Ako získať aktuálne údaje trasy v Angular 5


V mojej súčasnej situácii teraz umiestňujem data object do môjho lazy load komponentu a chcem získať obsah data a zobraziť ho v html. Ale nedokázal som to urobiť. Tu je skript:

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

Komponent je načítaný pomocou Lazy Load. Čo chcem je, keď pristúpim priamo na #/cancellation, chcem získať obsah dát, aký je najlepší spôsob? Máte nejaký nápad? Ďakujem veľmi pekne!

Odpoveď č. 1

K vlastnosti dát trasy môžete pristupovať zo snímky takto:

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'];
  }

}

To si vyžaduje injektovanie ActivatedRoute a následný prístup k snapshotu trasy. Namiesto odberu môžete použiť snapshot, pretože dáta sú statické.

Dúfam, že to pomôže.

Odpoveď č. 2

V závislosti od toho, kde to chcete použiť, ale ak je to zvýšené, môžete skúsiť:

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

Zachytíte každú zmenu trasy a získate údaje v trase.

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
    )

Súvisiace články