Angular 2/4 如何获取应用组件中的路由参数？

Question

由于我是 Angular 2/4 的新手，我在根据我的需要设置新应用程序时遇到了困难。

我正在尝试构建一个应用程序，该应用程序将从另一个应用程序中调用。调用应用程序将发送一些参数，如令牌、用户名、应用程序 ID 等。

现在，就像在 Angular 2/4 中一样，app.component 是我们的登陆组件，每个第一个请求都会经过它。因此，我想在应用程序组件中获取这些参数并加载一些用户详细信息，进行本地会话并转移到其他内容。

问题是当我尝试访问这些参数时我得到了任何东西。

这是将启动我的 Angular 应用程序的 URL： http://localhost:86/dashboard?用户名=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

对于一次性值使用如下：

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

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

上面的快照方法。快照方法只会在启动组件后提供结果。因此，如果您更改路线或销毁组件并再次启动，这将继续工作。

针对反对者和/或任何想要每次路线更改更新参数的人的解决方案将是：

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

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

Answer 2

这篇文章解决了问题。 这里

我需要创建一个单独的组件根，并且我保留了我的路由器出口并将这个组件添加为我的引导模块，它工作了！我的声誉不会超过 50，如果我有的话，我会在同一篇文章中感谢他。谢谢@Fabio Antunes

Answer 3

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  constructor( private route: ActivatedRoute, private router: Router ) {}

  ngOnInit(): void {
    this.router.events.subscribe(val => {
       if (val instanceof RoutesRecognized) {
         if (val.state.root.firstChild.params.id) {
          localStorage.setItem('key1', val.state.root.firstChild.params.id);
          localStorage.setItem('key2', val.state.root.firstChild.params.id2);
         }
            console.log('test', val.state.root.firstChild.params);
        }
    });

}

}

Answer 4

我的应用程序需要读取 appComponent（未路由）中的 queryParams，以便能够在路由到任何其他组件之前设置一些变量。 我不想改变架构来路由 appComponent。

这是我通过订阅路由器事件所采取的方法：

private _queryParamsSet: boolean = false;
  constructor(
    private _router: Router,
    private _activatedRoute: ActivatedRoute
  ) { }

  async ngOnInit() {    
     const onNavigationEnd = this._router.events
      .pipe(
        tap((data) => {
          if (!this._queryParamsSet && (data as NavigationStart)?.url) {
            const queryParams = CoreHelper.getQueryParamsFromURL((data as 
               NavigationStart).url);
            if (queryParams) {
              // set variables which will eventually decide which route to take
            }
            this._queryParamsSet = true;
          }
        }),
        filter(
          event => event instanceof NavigationEnd
        ));
}

Answer 5

对我有用的方法是以下方法的组合 已激活路由和路由器。

ngOnInit(): void {
this.router.events
  .pipe(
    filter(event => event instanceof NavigationEnd), // Wait for navigation to finish
    map(() => this.activatedRoute),                 // Start with the root route
    map(route => {
      while (route.firstChild) {
        route = route.firstChild;                   // Navigate to the deepest child route
      }
      return route;
    }),
    mergeMap(route => route.params)                 // Access route parameters
  )
  .subscribe(params => {
    this.routeParams = params;
    console.log('Global Route Params:', params);
  });

} }