ActivatedRoute.queryParams 未定义

Question

我正在尝试使用 Angular 2.0 捕获查询字符串参数，但遇到了困难。我有一个这样的网址

http://localhost:5000/?id_token=eyJ0eXAiO....

并且我希望能够在路由占据之前捕获 id_token 的值并且我丢失了参数。我找到了这个 GitHub 问题主题

https://github.com/angular/angular/issues/9451

但这使用了不再有效的弃用方法。我尝试了以下方法

    var foo = this.activatedRoute.queryParams.subscribe(params => {
        console.log(params);
        let id = params['id_token'];
        console.log(id);
    });


   console.log(this.router.routerState.snapshot.root.queryParams["id_token"]);

   var bar = this.activatedRoute.params.subscribe(
        (param: any) => console.log(param['id_token']));

我已经在构造函数以及组件的 ngOnInit() 中尝试过这些方法，但控制台总是显示未定义。我在错误的地方这样做吗？我根本无法更改 QS，因为它是由 Azure AD 创建的。

Answer 1

尝试注入 ActivatedRoute 并使用 route.snapshot.queryParams['name'] 获取 queryParam，如下所示：

class SomeComponent implements OnInit {
    constructor(private route: ActivatedRoute) { }
    ngOnInit(): void {
        let value = this.route.snapshot.queryParams['name'];
    }
}

通过 router.navigate 设置 queryParams 的工作方式如下：

class SomeComponent {
    constructor(private router: Router) { }
    goSomewhere(): void {
        this.router.navigate(['somewhere'], { queryParams: { name: 'value' } });
    }
}