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

Question

我想从 url 获取令牌，但它 return 为空值。

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

和routing.ts

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

我想在 url 之后抓取内容例如：localhost:4200/content-to-grab 有什么解决办法吗？

Answer 1

将代码更改为

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

Answer 2

试试这样抢

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

Answer 3

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

Answer 4

你的方法没问题，还有一个概念问题：

您正在尝试将路径关联到 根组件。

很可能，您的根模块看起来像这样：

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

框架在引导步骤中实例化的AppComponent的第一个实例将用作根组件，并且因此，注入的 ActivatedRoute 将类似于您的路由定义中的 "disconected"。

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

您可以在following stackblitz中自行查看。

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

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

Unable to access a route parameter through route.snapshot in root component

angular

angular-routing

routeparams

angular-activatedroute