从Angular 5中的URL获取数据

时间:2018-09-17 09:51:02

标签: angular routing angular-routing

我在网址栏中输入链接。

http://localhost:4200/reset-password-action/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9/5

我想从网址中获取 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 5

我将其保存在我的 app-routing.module.ts 文件中。

const routes: Routes = [
  { path: 'reset-password-action/:token/:user_id', component: NewPasswordComponent }
];

我需要一种简单的语法来获取此数据。

3 个答案:

答案 0 :(得分:2)

您需要先导入已激活的路由,然后使用此

import {Router, ActivatedRoute} from '@angular/router';
class ABC {
    id: any;
    token: any;
    constructor(private activatedRoute: ActivatedRoute) {}
    ngOnInit() {
        this.activatedRoute.params.subscribe(params => {
            if (typeof params['id'] !== 'undefined') {
                this.id = params['id'];
            } else {
                this.id = '';
            }
            if (typeof params['token'] !== 'undefined') {
                this.id = params['token'];
            } else {
                this.id = '';
            }
        });
    }
}

答案 1 :(得分:2)

首先,您想从哪里获得这些数据? 如果您希望在同一组件中使用它,就您而言,我认为它是NewPasswordComponent

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

@Component({...})
export class NewPasswordComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    console.log(this.route.snapshot.params.token);
    console.log(this.route.snapshot.params.user_id);
  } 
}

或者您也可以像下面这样:

 constructor(private route: ActivatedRoute) {}

    ngOnInit() {
      this.route.params.subscribe(event => {
      this.token = event.token;
      this.user_id = event.user_id;
     });
    }

答案 2 :(得分:0)

您可以使用ActivatedRoute获得类似这样的查询参数。这是示例:

UPDATE users SET email = LOWER(email);

您可以通过简单地用令牌或用户ID替换状态来获得令牌/用户ID。

希望这会起作用。