如何在Angular应用程序中从URL片段中检索参数？

Question

我在我的Angular应用程序中使用了OAuth隐式流身份验证方法。要检索访问令牌，我需要解析以下字符串中的参数：

http://localhost/authentication#access_token={0}&expires_in={1}&user_id={2}

在一些调查之后，我没有发现任何从这样的URL中检索参数的机制(我发现的所有机制都是基于手动字符串拆分的。这是否意味着Angular没有“开箱即用”的机制来解析URL片段中的参数，而最好的方法是使用substring()或split()方法？

Answer 1

您可以使用ActivatedRoute完成此操作：

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    console.log(this.route.snapshot.fragment); // only update on component creation
    this.route.fragment.subscribe(
      (fragments) => console.log(fragments)
    ); // update on all changes
  }

要检索查询参数，只需在此代码中将fragment替换为queryParams即可。

Answer 2

constructor(private activatedRoute: ActivatedRoute) {

    const fragment = activatedRoute.snapshot.fragment;

    const parts = fragment.split('&');

    const params = parts.reduce((map, part) => {
        const pieces = part.split('=');
        map[pieces[0]] = pieces[1];
        return map;
    }, {});

    console.log(params);
}

Answer 3

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

@Component({...})
export class MyComponent implements OnInit {

  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    // subscribe to router event
    this.activatedRoute.params.subscribe((params: Params) => {
        let userId = params['user_id'];
        console.log(userId);
      });
  }

}

如果您想获取查询参数，请将this.activatedRoute.params替换为this.activatedRoute.queryParams。