Angular 2/4如何在app组件中获取路由参数？

Question

由于我是角度2/4的新手,因此根据我的需要设置新应用程序时遇到问题.

我正在尝试构建一个将从另一个应用程序调用的应用程序.调用应用程序将发送一些参数,如令牌,用户名,应用程序ID等.

现在,与Angular 2/4一样,app.component是我们的登陆组件,每个第一个请求都将通过它.所以,我想在app组件中获取这些参数并加载一些用户细节,进行本地会话以及移动到其他东西.

问题是,当我试图访问这些参数时,我得到了任何东西.

这是将启动我的角度应用程序的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对象什么都没有.

Answer 1

这是你的角度5+的方式:

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

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

更新人们贬低的原因: 上面的快照方法.一旦启动组件,快照方法就会为您提供结果.因此,如果您更改路线或销毁组件并仅重新启动,这将继续工作.

对于每次路线改变时想要更新参数的downvoters和/或任何人的解决方案将是:

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

constructor(private route: ActivatedRoute){}
ngOnInit() {
    console.log(this.route.snapshot.params['username']); // works first time only
/** For later use, updates everytime you change route*/
    this.route.params.subscribe((parmas) => {console.log(params['username'])});
}

Answer 2

这个帖子解决了问题.这里

我需要创建一个单独的组件Root,并且我保留了我的Router-Outlet并添加了这个组件作为我的bootstrap模块,它工作了!! 我没有超过50的声望,如果我有,我会在同一篇文章上感谢他.谢谢@Fabio Antunes