Kątowa 2/4 Jak uzyskać parametry trasy w komponencie aplikacji?

Question

Ponieważ jestem nowy w kącie 2/4, mam problem z konfiguracją nowej aplikacji zgodnie z moją potrzebą.

Próbuję zbudować aplikację, która będzie wywoływana z innej aplikacji. Aplikacja wywołująca będzie wysyłać niektóre parametry, takie jak token, nazwa użytkownika, identyfikator aplikacji itp.

Teraz, podobnie jak w Angular 2/4, app.component jest naszym składnikiem lądowania i każde pierwsze żądanie będzie przez niego przechodzić. Tak więc chcę uzyskać ten parametr w komponencie aplikacji i załadować szczegóły dotyczące użytkownika, utworzyć sesję lokalną i przejść do innych rzeczy.

Problem polega na tym, że próbuję uzyskać dostęp do tego parametru. Otrzymuję wszystko.

Oto adres URL, który rozpocznie się mój kanciasty aplikację: http://localhost:86/dashboard?username=admin&token=xyz&appId=8

Oto mój kod plik routingu:

const routes: Routes = [ 
 
    { 
 
    path: 'dashboard/:username, token', component: AppComponent 
 
    } 
 
]; 
 

 
@NgModule({ 
 
    imports: [RouterModule.forRoot(routes)], 
 
    exports: [RouterModule] 
 
}) 
 
export class AppRoutingModule { 
 

 
}

Oto moja aplikacja kod komponent:

import { Component, OnInit } from '@angular/core'; 
 
import { AuthenticationService } from 'app/services/authentication/authentication.service'; 
 
import { User } from 'app/models/user/user'; 
 
import { AppConfig } from 'app/helpers/AppConfig'; 
 
import { ActivatedRoute, Router } from '@angular/router'; 
 

 

 
@Component({ 
 
    selector: 'app-root', 
 
    templateUrl: './app.component.html', 
 
    styleUrls: ['./app.component.css'] 
 
}) 
 
export class AppComponent implements OnInit { 
 
    _user: User = new User(); 
 
    obj: any; 
 
    error: any; 
 

 
    loginName: string; 
 
    private id: any; 
 

 
    constructor(
 
    private authenticationService: AuthenticationService, 
 
    private config: AppConfig, 
 
    private route: ActivatedRoute, 
 
    private router: Router 
 

 
) { } 
 

 
    ngOnInit() {  
 
    this.loadCurrentUserDetail(); 
 
    this.getParamValues() 
 

 
    } 
 

 
    getParamValues() { 
 
    this.id = this.route.queryParams.subscribe(params => {  
 
     this.loginName = params['username']; 
 
    }); 
 
    }

Tutaj params jest pusty nie wiem dlaczego?

Z góry dziękuję!

Podobnie jak w przypadku obiektów params obrazu nic nie ma.

Answer 1

Ten post rozwiązać problem. here

Potrzebowałem stworzyć osobny komponent Root, a także utrzymałem swój Router-Outlet i dodałem ten komponent jako mój moduł startowy i zadziałało! Nie mam reputacji więcej niż 50, gdybym miał, niż bym mu podziękował na tym samym stanowisku. Dzięki człowiek @Fabio Antunes

Answer 2

zmienić trasę do tego

const routes: Routes = [ 
    { 
    path: 'dashboard/:username', component: AppComponent 
    } 
]; 

Komponent

import {Router, ActivatedRoute, Params} from '@angular/router'; 
import {OnInit, Component} from '@angular/core'; 
import {Subscription} from 'rxjs/Subscription'; 

@Component({...}) 
export class MyComponent implements OnInit { 

    subscription:Subscription; 

    constructor(private activatedRoute: ActivatedRoute) {} 

    ngOnInit() { 
    // subscribe to router event 
    this.subscription = this.activatedRoute.queryParams.subscribe((params: Params) => { 
     let userId = params['username']; 
     let token = params['token']; 
     console.log(userId); 
     }); 
    } 

    ngOnDestroy() { 
    // prevent memory leak when component is destroyed 
    this.subscription.unsubscribe(); 
    } 


} 

Answer 3

To twoja droga w kątowym 5:

import { Router , ActivatedRoute } from '@angular/router'; 

constructor(private activeRoute: ActivatedRoute){} 
ngOnInit() { 
    console.log(this.activeRoute.snapshot.params['username']); 
}