如何在Angular 5中使用ActivatedRoute?

问题描述

我正在尝试做与此帖子完全相同的事情: Angular 4获取queryString

I am trying to do exactly the same thing as in this post: Angular 4 get queryString

我正在使用Angular 5.2.5.

I am using Angular 5.2.5.

ActivatedRoute似乎是在用户首次访问网站时从URL检索查询字符串值的东西.但是，我无法弄清楚需要导入什么才能使用ActivatedRoute.

ActivatedRoute seems to be the thing to use to retrieve querystring values off the URL when the user first visits the website. However, I am unable to figure out what I need to import to be able to use ActivatedRoute.

有人可以确切指定需要在app.module.ts文件以及我要使用ActivatedRoute的component.ts文件中添加什么吗?

Could someone specify exactly what needs to be added to the app.module.ts file, and the component.ts file where I am trying to use ActivatedRoute?

这篇文章指定将路由添加到@NgModule的imports数组:否提供了ActivatedRoute-Angular 2 RC5 .但是，我没有app.routing.ts文件.我必须创建一个app.routing.ts文件才能使用ActivatedRoute吗?

This post specifies adding routing to the imports array of the @NgModule: No provider for ActivatedRoute - Angular 2 RC5. However, I don't have an app.routing.ts file. Do I have to create an app.routing.ts file to use ActivatedRoute?

推荐答案

ActivatedRoute 包含有关与插座中加载的组件关联的路由的信息.它也可以用于使用ID，标志，状态等路由将数据从one component传递到another component.

ActivatedRoute Contains the information about a route associated with a component loaded in an outlet.It can also be used to pass data from one component to another component using route such as Id, flag, state etc.

http://localhost:4200/quiz/edit_quiz/032

032是您要编辑的测验的id.

032 being id of the quiz you wanna edit.

在您的组件中获取此ID(在我的情况下为 edit_quiz.compontent.ts )，以使用激活的路由"来使用.

Get this id in your component(in my case let it be edit_quiz.compontent.ts) to use by using Activated Route.

步骤1:从路由器模块导入ActivatedRoute.

Step 1: Import ActivatedRoute from Router module.

import { ActivatedRoute } from '@angular/router';

步骤2:在构造函数中注入ActivatedRoute.

Step 2: Inject ActivatedRoute in constructor.

  constructor(private activatedRoute: ActivatedRoute) { }

步骤3:获取ngOnInit(){}

   ngOnInit() {
    this.quiz_id = this.activatedRoute.snapshot.params['id'];
   }

现在我们在edit_quiz.component.ts中有ID供使用.

Now we have id in edit_quiz.component.ts to use.

这篇关于如何在Angular 5中使用ActivatedRoute?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！