文档章节

从 Angular 中的 URL 获取查询参数

waylau
 waylau
发布于 09/03 21:01
字数 259
阅读 15
收藏 0

本文介绍了如何从 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();
  }
}

参考引用

© 著作权归作者所有

waylau

waylau

粉丝 528
博文 105
码字总数 185862
作品 2
深圳
架构师
私信 提问
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.2K
26
通过路由管理视图间切换 - AngularJS路由解析

AngularJS中通过ngRoute来实现相关的路由功能,基本的安装和使用请看官网. 模板的视图刷新 ng-view这个指令和路由组合之后就可以将$route对应的视图放入指定的HTML中,这一过程中它会创建自己的...

顽Shi
2014/11/21
2.6K
5
Angular 4.1.0 正式发布,Web 前端框架

Angular 4.1.0 发布了,这是 Angular 4.0 的第一次小版本发布, Angular 版本号语义与发布计划。 Angular 4.1.0 版本增加了对 TypeScript 2.2 和 2.3 的支持。这个版本的 Angular 是使用 Ty...

局长
2017/04/27
6.3K
19
如何将 GitHub 中的项目导入到 stackblitz.com 中

如何将一个 GitHub 中的项目导入到 stackblitz.com 中,然后开始编辑和编译呢? 例如,我们有一个项目在 GitHub 中的地址为:https://github.com/cwiki-us-angular/cwiki-us-angular-app 如何...

honeymoose
05/18
5
0
将Angular 6应用程序部署到Cloud Foundry

  我们讨论了两个有趣的开源技术,Angular和Cloud Foundry,并向您展示如何将Web应用程序部署到云。   介绍   在本文中,我将介绍在Cloud Foundry上部署Angular 6应用程序的步骤。本文...

爱码农
2018/11/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Podman 使用指南

> 原文链接:Podman 使用指南 Podman 原来是 CRI-O 项目的一部分,后来被分离成一个单独的项目叫 libpod。Podman 的使用体验和 Docker 类似,不同的是 Podman 没有 daemon。以前使用 Docker...

米开朗基杨
54分钟前
5
0
拯救 项目经理个人时间的5个技巧

优秀的项目经理都有一个共同点,那就是良好的时间管理能力。专业的项目经理会确保他们的时间投入富有成效,尽可能避免时间浪费。 时间管理叫做GTD,即Getting Things Done——“把事情做完”...

Airship
今天
6
0
LNMP环境介绍,Mariadb安装,服务管理,mariadb安装3

LNMP环境介绍 Nginx 处理的请求有两种,分为 静态与动态 图片,js,css,视频,音频,flash 等都是静态请求,这些数据都不是保存在数据库里面的 动态请求一般来说,需要的数据是在数据库里面...

doomcat
今天
2
0
前端技术之:Prisma Demo服务部署过程记录

安装前提条件: 1、已经安装了docker运行环境 2、以下命令执行记录发生在MackBook环境 3、已经安装了PostgreSQL(我使用的是11版本) 4、Node开发运行环境可以正常工作 首先需要通过Node包管...

popgis
今天
7
0
数组和链表

数组 链表 技巧一:掌握链表,想轻松写出正确的链表代码,需要理解指针获引用的含义: 对指针的理解,记住下面的这句话就可以了: 将某个变量赋值给指针,实际上就是将这个变量的地址赋值给指...

code-ortaerc
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部