Angular 2/4如何在app組件中獲取路由參數？

由於我是角度2/4的新手，我無法根據需要設置新的應用程序。Angular 2/4如何在app組件中獲取路由參數？

我想構建一個應用程序，將從另一個應用程序調用。調用應用程序將發送一些參數，如令牌，用戶名，應用程序ID等。

現在，在角度2/4中，app.component是我們的登陸組件，每個第一個請求都會經過它。所以，我想在應用程序組件中獲取這些參數，並加載一些用戶詳細信息，進行本地會話並轉移到其他內容。

問題是當我試圖訪問這些參數我收到任何東西。

這裏將開始我的角度應用程序的URL： http://localhost:86/dashboard?username=admin&token=xyz&appId=8

這裏是我的路由文件代碼：

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

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

 
}

這裏是我的應用程序組件代碼：

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

這裏params爲空的，不知道爲什麼？

在此先感謝！

由於在圖像參數對象中沒有任何東西。

來源

2017-07-25 Praveen Rawat

這篇文章解決的問題。 here

我需要創建一個單獨的組件根，並在那裏我保持我的路由器插座，並添加此組件作爲我的啓動模塊，它的工作！如果我有我超過50的聲望，我不會在同一個職位上感謝他。感謝的人@Fabio安棟樑

來源

2017-07-25 18:20:04

更改這個

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

路由組件

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(); 
    } 


}

來源

2017-07-25 16:44:18

我添加了一些截圖，也沒有工作 –

有什麼錯誤？ –

沒有隻有params ovject是空的。通常情況下，它裏面會有關鍵值對，但它是空的。 –

這是你的方式在5角去：

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

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

來源

2018-03-01 06:49:11

Angular 2/4如何在app組件中獲取路由參數？

回答

相關問題