无法通过根组件中的route.snapshot访问路由参数

Question

我想从url中获取令牌，但它返回null作为值。

app.component.ts:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {    
  constructor(private route: ActivatedRoute) { }
    ngOnInit(){  
    const token = this.route.snapshot.paramMap.get('token');
    console.log(token);

和路由。ts

{ path: ':token', component: AppComponent }

我想抓取url中/之后的内容，例如：localhost:4200/content to grab有什么解决方案吗？

Answer 1

您的方法还可以，还有另一个概念问题：

您正试图将路径关联到根组件

最有可能的是，您的根模块看起来像这样：

@NgModule({
  imports: [
    RouterModule.forRoot(...)
  ],
  declarations:[
    ...
    AppComponent,
    ...
  ],
  boostrap: [AppComponent]
})
export class AppModule {}

框架在引导步骤中实例化的AppComponent的第一个实例将被用作根组件，因此，注入的ActivatedRoute将与您的路由定义"不一致"。

此外，通过RouterOutlet指令解析的AppComponent实例将知道您的路由定义。

您可以在下面的stackblitz中自行检查。

注入到AppComponent的第一个实例中的ActivatedRoute实例不会以异步或同步的方式反映路由参数。如果导航到类似{url}/#/bla的内容，则会因为<router-outlet>而解析AppComponent的第二个实例。注入到其中的ActivatedRoute实例将反映路由参数值，两者都同步。并且异步。

Answer 2

试着这样抓住它。

this.route.snapshot.params["token"]

Answer 3

将代码更改为

this.route.paramMap.subscribe(params => { console.log(params.get('token'));})

Answer 4

ngOnInit(){  
    const token = this.activatedRout.snapshot.params.token;
}