angular6 监听url查询参数变化刷新页面

最新推荐文章于 2024-05-28 14:57:27 发布

weixin_30544657

最新推荐文章于 2024-05-28 14:57:27 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lucky-heng/p/10970303.html

快照snapshot取到的参数是组件第一次渲染时候的参数，当我们在页面中需要根据不同的url查询参数显示不同的内容时，快照就不能满足我们的需要了，这时候就要用ActivatedRoute服务的queryParamMap参数，queryParamMap是一个Observable对象，每次路由变化，都会emit一个(params: ParamMap)对象,然后用params.get()方法来获取参数。

假设url查询参数：?id=123 这种

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  id:string;
  constructor(private route: ActivatedRoute) {}
  ngOnInit() {
    this.route.queryParamMap.subscribe((params: ParamMap) => {
      this.id = params.get('id');
    });
  }
}

转载于:https://www.cnblogs.com/lucky-heng/p/10970303.html