从 Angular 中的 URL 获取查询参数

本文介绍了如何从 Angular 中的 URL 获取查询参数。

经过注入ActivatedRoute的实例，能够订阅各类可观察对象，包括queryParams和params observable。如下是范例：

import { ActivatedRoute } from '@angular/router';  // 用于获取路由参数
import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'; // 用于HTML过滤
import { Location } from '@angular/common'; // 用于回退浏览记录

import { NewsDetailService } from '../news-detail.service';

@Component({
  selector: 'app-news-detail',
  templateUrl: './news-detail.component.html',
  styleUrls: ['./news-detail.component.css']
})
export class NewsDetailComponent implements OnInit {

  newsDetailData = null;
  newsUrl = null;

  constructor(private newsDetailService: NewsDetailService,
    private domSanitizer: DomSanitizer,
    private route: ActivatedRoute,
    private location: Location) { }

  ngOnInit() {
    this.showNewsDetailData();
  }

  // 展现新闻详情数据
  showNewsDetailData() {
    this.route.queryParams.subscribe(p => {
      this.newsUrl = p.newsUrl // 获取参数

      this.newsDetailService.getNewsData(this.newsUrl).subscribe(
        (newsApiData) => this.newsDetailData =
          this.domSanitizer.bypassSecurityTrustHtml(newsApiData.toString()) //HTML过滤
      );

    });
  }

  // 返回
  goback() {
    // 浏览器回退浏览记录
    this.location.back();
  }
}

参考引用

• 本文同步至: https://waylau.com/get-query-params-from-url-in-angular/
• 完整源码：https://github.com/waylau/angular-enterprise-application-development-samples
• 《Angular企业级应用开发实战》