typescript - Bagaimana mendapatkan data rute saat ini di angular 5

Dalam situasi saya sekarang, saya menaruh data object di komponen lazy load saya, dan saya ingin mendapatkan konten data dan menampilkannya di html. Tapi saya tidak bisa melakukannya. Berikut adalah skripnya:

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

Komponen dimuat oleh Lazy Load. Yang saya inginkan adalah, ketika saya mengakses langsung di #/cancellation, saya ingin mendapatkan data content, apa cara terbaiknya? Ada ide? Terima kasih banyak!

Jawaban #1

Anda dapat mengakses properti data rute dari snapshot seperti ini:

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

}

Ini memerlukan penyuntikan ActivatedRoute, lalu mengakses snapshot dari rute tersebut. Anda dapat menggunakan snapshot alih-alih berlangganan karena datanya bersifat statis.

Semoga ini membantu.

Jawaban #2

Tergantung di mana Anda ingin menggunakannya, tetapi jika itu ditinggikan, Anda bisa mencoba:

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

Anda akan mendeteksi setiap perubahan rute dan mendapatkan data dalam rute tersebut.

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
    )

Artikel terkait