为了账号安全,请及时绑定邮箱和手机立即绑定

如何从Angular 2中的url获取查询参数?

如何从Angular 2中的url获取查询参数?

Smart猫小萌 2019-09-20 14:55:59
我使用angular2.0.0-beta.7。将组件加载到/path?query=value1重定向到的路径上时/path。为什么要删除GET参数?如何保存参数?我在路由器中有错误。如果我有像这样的主要路线@RouteConfig([  {      path: '/todos/...',      name: 'TodoMain',      component: TodoMainComponent  }])和我的孩子一样的路线@RouteConfig([  { path: '/', component: TodoListComponent, name: 'TodoList', useAsDefault:true },  { path: '/:id', component: TodoDetailComponent, name:'TodoDetail' }])然后我无法在TodoListComponent中获取参数。我能得到params("/my/path;param1=value1;param2=value2") 但我想要经典query params("/my/path?param1=value1&param2=value2")
查看完整描述

3 回答

?
忽然笑

TA贡献1806条经验 获得超5个赞

通过注入一个实例,ActivatedRoute可以订阅各种可观察对象,包括a queryParams和paramsobservable:


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

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


@Component({...})

export class MyComponent implements OnInit {


  constructor(private activatedRoute: ActivatedRoute) {}


  ngOnInit() {

    // Note: Below 'queryParams' can be replaced with 'params' depending on your requirements

    this.activatedRoute.queryParams.subscribe(params => {

        const userId = params['userId'];

        console.log(userId);

      });

  }


}

关于取消订阅的说明


@Reto和@ codef0rmer非常正确地指出,根据官方文档,在这种情况下unsubscribe(),组件onDestroy()方法内部是不必要的。这已从我的代码示例中删除。(参见本教程中的蓝色警告框)


查看完整回答
反对 回复 2019-09-20
  • 3 回答
  • 0 关注
  • 951 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信