Angular get query parameters from the URL

This article describes how to obtain the query parameters from Angular the URL.

By way of example injection ActivatedRoute may subscribe to various observable objects, comprising queryParams and params observable. Here is an example:

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

References

• This article synchronized to: https://waylau.com/get-query-params-from-url-in-angular/
• Complete source code: https://github.com/waylau/angular-enterprise-application-development-samples
• " Angular Enterprise Application Development combat ."