Question

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

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

经过一些调查后，我没有找到任何从这些URL中检索参数的机制（我发现的所有机制都是基于使用手动字符串拆分。这是否意味着Angular没有“开箱即用”机制来解析来自网址片段的参数以及执行此操作的最佳方法是使用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

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。

Answer 3

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

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

3 个答案: