Góc 2/4 Cách nhận thông số tuyến đường trong thành phần ứng dụng?

Question

Vì tôi mới đến góc 2/4, tôi đang gặp sự cố khi thiết lập ứng dụng mới theo nhu cầu của mình.

Tôi đang cố xây dựng một ứng dụng sẽ được gọi từ một ứng dụng khác. Ứng dụng gọi điện sẽ gửi một số thông số như mã thông báo, tên người dùng, id ứng dụng và v.v.

Bây giờ, như trong phần 2/4, app.component là thành phần đích của chúng tôi và mọi yêu cầu đầu tiên sẽ đi qua nó. Vì vậy, tôi muốn có được những tham số ở đây trong thành phần ứng dụng và tải một số chi tiết người dùng, tạo một phiên cục bộ và chuyển sang các nội dung khác.

vấn đề là khi tôi đang cố gắng truy cập vào thông số này, tôi nhận được bất kỳ thứ gì.

Đây là URL mà sẽ bắt đầu áp dụng góc của tôi: http://localhost:86/dashboard?username=admin&token=xyz&appId=8

Đây là mã tập tin định tuyến của tôi:

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

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

 
}

Đây là App Mã Component tôi:

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

Thông số này trống không biết tại sao?

Cảm ơn trước!

Như trong đối tượng params hình ảnh không có gì.

Answer 1

bài này giải quyết vấn đề. here

Tôi cần thiết để tạo ra một thành phần riêng biệt Root và trong đó tôi giữ Router-Outlet của tôi và thêm thành phần này như là mô-đun bootstrap của tôi và nó đã làm việc !! Tôi không có danh tiếng hơn 50 nếu tôi đã có hơn tôi sẽ cảm ơn anh ta trên cùng một bài. Cảm ơn người đàn ông @Fabio Antunes

Answer 2

Thay đổi con đường này

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

Component

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

Đây là con đường của bạn để đi vào góc 5:

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

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