首页 > QQ技巧 > 从 Angular 中的 URL 获取查询参数

从 Angular 中的 URL 获取查询参数

时间:2021-04-23 20:46 作者:QQ地带 我要评论

通过注入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();
  }
}

标签: Angular
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告