如何在angular中使用路由器或ActivatedRoute从url获取参数
在Angular中，可以使用路由器或ActivatedRoute来从URL中获取参数。以下是使用这两种方法的步骤：
- 使用路由器获取参数：
- 首先，在路由配置文件（通常是app-routing.module.ts）中定义路由参数。例如，如果要传递一个名为id的参数，可以在路由路径中添加:id。
- 在组件中，导入Router模块并注入到构造函数中。
- 使用router对象的params属性来访问参数。可以通过params.subscribe()方法来订阅参数的变化。
- 在订阅方法中，可以通过params.get('id')来获取具体的参数值。
- 以下是一个示例：
- 以下是一个示例：
- 使用ActivatedRoute获取参数：
- 在组件中，导入ActivatedRoute模块并注入到构造函数中。
- 使用activatedRoute对象的snapshot属性来访问参数。可以通过snapshot.paramMap.get('id')来获取具体的参数值。
- 以下是一个示例：
- 以下是一个示例：
以上是在Angular中使用路由器或ActivatedRoute从URL获取参数的方法。在实际应用中，可以根据具体需求选择适合的方法来获取参数。对于更复杂的路由参数处理，可以使用queryParams来获取查询参数或使用路由守卫来处理路由变化。
相关·内容
在我的angular应用程序中，我正在尝试从AppComponent中的url获取参数。 但是当我使用ActivatedRoute来获取参数时，它会给出null。这是我的路由器配置。 {
path: '',
component: HomeComponent,
canActivate: [AuthGuard]
},
{
path: 'product/:product',
component: HomeComponent,
canActivate: [AuthGuard]
} 这就是我在AppComp
浏览 46提问于2019-04-12得票数 0
2回答
我在混合模式下使用AngularJS 1.5和Angular 7。如何更改Angular组件中的url？我尝试访问当前的url，如下所示： constructor(private router: Router, private route: ActivatedRoute) {
console.log(this.route.snapshot.queryParams);
} 查询参数始终为空。在父AngularJS组件中，我使用$location服务获取查询参数。如果我尝试使用路由器更改路由，它会显示无效路由。如何更改Angular组件中的当前url？目前，我正在发出一个事件，该事件由
浏览 28提问于2019-06-21得票数 0
回答已采纳
每当路由发生变化时，我都会尝试从路由器获取数据，但我没有取得成功。这里我设置了asdf属性
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
LoginComponent,
DashboardComponent,
OverviewComponent,
],
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot([
{ path: '', pat
浏览 8提问于2016-11-17得票数 20
回答已采纳
问题被更新为
我在网上寻找信息，但不幸的是，我没有找到任何信息。如果以参数的形式传输urlstring，有很多关于角如何从urlstring捕获值的信息，但我有另一种情况。
在成功地重新分配提交后，我的应用程序将url从后端发送到前端。这个url包含id和token，如下所示：
http://localhost:4200/activate?id=MzU&token=541-b257b0475444facd4e3f
我的问题是，如何在角7+中从url捕获id和token值？
Pls注意到，正如我所说的，这个url来自后端。在用户注册后，我的后端生成这个url并发送包含它的电子邮件。用户单
浏览 1提问于2019-02-20得票数 2
回答已采纳
我有一个主要部件，里面有一个路由器插座。在加载到路由器出口中的组件中，我获取url参数，如下所示：
ngOnInit(): void {
// _route is injected ActivatedRoute
this._route.params.subscribe((params: Params) => {
if(params['url']){
this.testUrl = params['url'].replace(new RegExp('\%2[fF]', 'g')
浏览 8提问于2017-03-22得票数 38
回答已采纳
4回答
我无法从ActivatedRoute或路由器导入中获取URL或路径。它为路径"“输出空白，为URL输出'/‘。我记得我使用的是工作版本。唯一能捕获正确路由的就是Router.events。我也无法订阅ActivatedRoute中的网址。以下是代码
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Router, ActivatedRoute, UrlSegment, NavigationStart, RoutesRecognized } from
浏览 1提问于2018-09-03得票数 2
当我给出路由器导航数据没有在路由器page.But中更新时，当我刷新浏览器时，更新的数据可以显示在路由器页面.i中，只想重新加载组件。我尝试了路由器导航，首先导航到虚拟组件，然后导航到路由器page.is，还有其他更好的方法吗？
import { Component, OnInit } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { Appsettings } from '../../../app.s
浏览 0提问于2017-11-07得票数 0
1回答
我有ng2应用程序，其中有app/app.module .核心/核心模块..。
在核心模块中，我有一些在应用程序顶层使用的模块，并且只使用过一次(就像官方文档中的那样)，但是其中一个模块需要路由器模块(一些功能正在与路由器一起工作)。
但是路由器是在App.module中提供的(所有的应用程序路由)。我遇到了问题-没有来自核心/头/头组件的ActivatedRouteSnapshot提供者
我怎么能解决这个问题？我应该把我的头从核心到应用文件夹还是我应该为核心模块提供路由器？谢谢。
P.S.使用路由器模块更新。我仍然有一个错误- No provider for RouterStateSnaps
浏览 0提问于2016-10-17得票数 16
回答已采纳
再次需要帮助！
我使用的是Angular 4，我想从我的组件中的一个url中获取参数。URL为"“或"”
我尝试了这些不同的方法，但没有成功。
如何获取url参数'user'，'token‘和'picture'？
import { Routes, RouterModule, Router, ActivatedRoute, RouteSegment, Params, ROUTER_DIRECTIVES } from '@angular/router';
constructor(private restSvc: Rest
浏览 236提问于2017-11-03得票数 7
回答已采纳
我正在尝试做与本文中完全相同的事情：
我使用的是Angular 5.2.5。
当用户第一次访问网站时，ActivatedRoute似乎可以用来从URL中检索查询字符串值。但是，我不知道需要导入什么才能使用ActivatedRoute。
谁能确切地指定需要添加到app.module.ts文件和我尝试使用ActivatedRoute的component.ts文件中的内容吗？
这篇文章指定将路由添加到@NgModule：的imports数组中。但是，我没有app.routing.ts文件。是否必须创建app.routing.ts文件才能使用ActivatedRoute？
浏览 45提问于2018-05-04得票数 12
我得到了一个Angular2 2服务，它应该从像这样的URL返回参数。
import { Injectable } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/map';
@Injectable()
export class ParameterService {
constructor(private route: ActivatedRoute) { }
getParame
浏览 2提问于2016-09-20得票数 4
回答已采纳
4回答
我对AngularJS相当陌生(使用2稳定)。我有一个现有的PHP/Codeigniter3应用程序，我的工作是制作一个SPA。我遇到了一个问题，我根本无法访问路由器参数来将它们添加到templateUrl中。
例如：
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
@Component({
selector: 'apps_container',
//
浏览 5提问于2016-09-30得票数 0
回答已采纳
2回答
使用路由器事件，我可以看到导航更改和更新的URL。但是如何从URL获取实际的路由器状态(数据、解析、参数等)。我尝试使用ActivatedRoute，但这只在组件初始化之后才初始化。
当前代码：
@Component({...})
export class SecundaryMenuComponent implements OnInit, OnDestroy {
private titleSubject$: BehaviorSubject<string> = new BehaviorSubject<string>('');
public titl
浏览 4提问于2022-02-25得票数 0
回答已采纳
我正试着从URL中获取开始日期。URL看起来像http://sitename/booking?startdate=28-08-2017
我的代码如下：
aap.module.ts
import {...};
@NgModule({
declarations: [
AppComponent, ModalComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
JsonpModule,
浏览 13提问于2017-09-01得票数 122
回答已采纳
我的Range2项目正在实现Instagram身份验证，如下所示：
注册Instagram客户端，添加沙箱用户(作为先决条件)
在signup.html中
<type=按钮“按钮”class="btn btn-圆形“(单击)=”signInWithInsta()“> Instagram
在signup.component.ts中
从‘@角/路由器’导入{路由器，ActivatedRoute }；构造器(私有路由器:路由器，私有路由: ActivatedRoute ){} ngOnInit() {}ngOnInit(){ this.route .queryPara
浏览 0提问于2018-07-25得票数 1
我试图在浏览器中找到当前的url，为此我做了以下操作，
import { Router, ActivatedRoute } from '@angular/router';
@Component({
templateUrl: './app/profile/profile.html',
})
export class Profile {
constructor(fbld: FormBuilder, public router: ActivatedRoute) {
console.log(router._routerState.sn
浏览 6提问于2017-02-24得票数 0
回答已采纳
6回答
我有一个组件，我需要检测用户是否按下了浏览器中的后退按钮才能向后导航。
目前我正在订阅路由器事件。
constructor(private router: Router, private activatedRoute: ActivatedRoute) {
this.routerSubscription = router.events
.subscribe(event => {
// if (event.navigatesBack()) ...
});
}
我知道我可以使用window.onpopstate，但是当使用
浏览 6提问于2016-11-02得票数 51
回答已采纳
我可以找到的所有示例都只展示了如何测试调用navigateByUrl的组件。我有一项服务可以做到：
@Injectable({
providedIn: 'root'
})
export class BreadcrumbService {
constructor(private router: Router, private activateRoute: ActivatedRoute) {}
/**
* Return a array of current path
*
*/
getCurrentRouterPath(): Array<st
浏览 7提问于2020-05-07得票数 1
回答已采纳
更新1
在我阅读了Alexanders的建议之后，我更新了代码并没有得到任何错误信息。但是Angular不再向服务器发出请求了，这让我很好奇。而且pageTitle也不更新。
appointmentDetail.component.html
{{appointmentDetail.time}}
appointmentDetail.component.ts
import { Component, OnInit, OnDestroy, Injectable } from '@angular/core';
import { ActivatedRoute, ParamMap } fro
浏览 0提问于2018-08-25得票数 0
回答已采纳
如何使用angular 2从url (例如https://www.youtube.com/watch?v=Xnjw0SBKDM0 )获取查询参数？我知道如何从ActivatedRoute方法获取查询参数，但我只需要传递一个字符串，而不是我当前的路由器路由。
浏览 11提问于2017-07-15得票数 0
我想检查url private m_Router: Router
if(this.m_Router.url == "create/xxx")
{
.....
} 我可以用上面的代码很好地实现对url的检查和基于URL的操作。但是我已经实现了这个硬编码。 我可以从路由器获取路径吗？ 我不能使用私有的url : ActivatedRoute，因为它与a_Router无关。 主要的问题是，当我在创建/xxx页面中，当我试图导航创建/xxx/yyy时，具有url create/xxx的组件再次被触发(ngOnInıt)，所以我想检查ngOnInit()中这是否是真正属于该页面的u
浏览 8提问于2019-05-20得票数 0
我在TypeScript中创建了一个组件库，我想共享许多服务。
export abstract class ComponentBase<T> {
constructor(protected http:Http, protected router: Router, protected route: ActivatedRoute, protected params: Params) {
}
}
问题是，我有多个嵌套类型，因此，每当我必须从层次结构中派生出任何级别时，我都会这样做。每种派生类型看起来都是这样，传递给基的注入参数。
import { Http } from '
浏览 2提问于2017-09-02得票数 0
我有一个定义为/abc/:id/xyz的路由
其中abc/:id解析为ComponentA，/xyz是路由器插座(ComponentB)中显示的子组件
在导航到/abc/:id/xyz时，当我执行this.route.params.subscribe(...)(其中ActivatedRoute是路由)在ComponentA中，我看到:id。当在ComponentB中做同样的事情时，我看不到:id。我猜ActivatedRoute使用的是url段。
有没有办法获得路由中的所有参数？
浏览 4提问于2016-07-22得票数 10
回答已采纳
1回答
我有一条这样的路线
<a [routerLink]=" ['../projects', project.id] ">
当我尝试从这个url获取一个路由参数时，我什么也得不到。
我的导入：
import { Component} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
我的构造函数：
constructor(private route: ActivatedRoute) {}
My on init：
ngOnIn
浏览 0提问于2016-11-16得票数 0
我有一个问题，从url获得一个param，同时在角中使用ActivatedRoute，因为我正在尝试下面的方法。
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PartPriceComponent } from './part-price/part-price.component';
const routes: Routes = [
浏览 3提问于2020-08-12得票数 1
1回答
在PHP中，您将获得所有URL参数
print_r($_GET);
在JavaScript中，它是这样的
window.onload = function() {
GetURLParameter();
};
function GetURLParameter()
{
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i+
浏览 0提问于2019-09-10得票数 0
回答已采纳
如果URL如下所示，我可以获得查询参数：
当浏览器在上面的URL中编码$、=和?时，我无法检索查询参数，
编码的URL如下所示：
下面是我试图检索查询参数的代码段(当URL未编码时工作正常，但当浏览器对URL进行编码时会失败)。
this._activatedRoute.snapshot.queryParams;
this._activatedRoute.queryParams.subscribe(value=> {
console.log('here');
console.log(value);
});
我使用的是角版本2.3.1，路由
浏览 0提问于2017-11-23得票数 0
2回答
最近对Angular路由器进行了如此多的修改，我不知道该怎么做。
我在我的父组件上有一个叫做"eventId“的参数，它在地址栏中：
http://localhost:4200/event/1
在本例中，它的值是1。
下面是我在路由组件中声明它的方式：
{ path: 'event/:eventId', loadChildren: './event/event.module#EventModule', canActivate: [AuthGuard] },
所以我有一个子组件，它一直在下面：
http://localhost:4200/event/1/e
浏览 0提问于2017-10-25得票数 2
是否可以传递触发路由器停用事件时单击的路由的URL？我有一个停用的gaurd，就像这样
import { Injectable } from '@angular/core';
import { CanDeactivate} from '@angular/router';
import { Observable } from 'rxjs/Observable';
export interface CanComponentDeactivate {
canDeactivate: () => Observable<boolea
浏览 1提问于2016-11-04得票数 0
我正在构建一个应用程序，其中第一个url段表示界面的语言，例如：
/en/customer/3
/en/shop
我的路由器是这样设置的：
{ path: ':lang/customers/:id', component: CustomerComponent },
{ path: ':lang/shop', component: ShopComponent },
我希望在引导的AppComponent或翻译服务中使用url中的语言参数(在本例中为lang= 'en‘)。我可以在ShopComponent和CustomerComponent中访问这个参数，
浏览 0提问于2016-12-20得票数 7
我想使用routerLink传递一个带有URL的值，并在另一个页面上读取该值。就像我有模块和子模块一样。在选择第一条记录时，该记录的id将传递给用户页面。在读取该Userid之后，我希望显示该用户和模块/子模块的详细信息。
那么我如何传递和获取值(对象)呢？
Userdetails组件类：
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'userde
浏览 2提问于2018-02-13得票数 0
2回答
我在路由器上使用相同的组件，在第一次单击受影响的组件时，在下一次单击仍然处于第一状态的组件。
下面是更改路由的脚本
<a [routerLink]="['react/1']">link 1</a>
<a [routerLink]="['react/2']">link 2</a>
这是我的路由器模块
panel-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, Rou
浏览 2提问于2021-03-23得票数 2
回答已采纳
我正在学习如何使用Angular 2，我目前正在使用路由。我尝试做的是使用子路由获取路由参数。
我目前正在开发一个可以显示用户详细信息的应用程序。url应该是这样的。
本地主机:4200/用户/id/详细信息
对于这个应用程序，我使用了嵌套在user文件夹中的UserComponent和DetailsComponent。我只希望能够更改url并在我的组件中获取url段。
我尝试获取url的方法是在DetailsComponent的构造函数中使用来自'@angular/router‘的ActivatedRoute，并将其分配给id属性，我使用字符串插值在模板中查看它。以下是Details
浏览 4提问于2017-02-25得票数 4
hero-detail.component.ts
import { Component, Input, OnInit } from '@angular/core';
import 'rxjs/add/operator/switchMap';
import { ActivatedRoute} from '@angular/router';
import { ParamMap } from '@angular/router';
import { Location } from '@angula
浏览 2提问于2017-07-29得票数 2
回答已采纳
3回答
我正在努力捕捉第三方应用程序接口传递给我的angular2应用程序的URL查询字符串参数。网址为
如何在组件中捕获"oauth_token“的值？我很高兴地使用组件路由器进行基本路由，它只是查询字符串。我已经尝试了几次，我最新的接收组件看起来像这样
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
template: ''
})
export class
浏览 10提问于2016-07-28得票数 2
在我的Angular组件中，我使用以下代码创建了两个可观察对象
this.navigationEnd = this.router.events.subscribe((event: any) => {
// do some stuff
});
if (this.activeRoute.firstChild) {
this.activeRouteChild = this.activeRoute.firstChild.params.subscribe((routeParams) => {
// do some stuff
});
}
如你所见，我订阅了activeR
浏览 0提问于2018-10-01得票数 1
2回答
import { ViewContainerRef, ComponentFactoryResolver, Directive, ResolvedReflectiveProvider} from '@angular/core';
import { Router, RouterOutlet, ActivatedRoute, RouterOutletMap } from '@angular/router';
@Directive({
selector: 'router-outlet'
})
export class ApplicationRo
浏览 1提问于2016-07-11得票数 0
1回答
我如何才能在数据服务中获得对localhost:4200/id的访问，才能在某些JSON链接中获得它？
我的意思是，当我在localhost:4200/001时，我想得到zzz.com/001/summary的JSON
尝试过这样做，但在控制台中，我得到了zzz.com/undefined/summary
const routes: Routes = [
{ path: ':id', component: AppComponent },
];
import { HttpClient } from '@angular/common/http';
import
浏览 3提问于2019-04-01得票数 0
我有一个关于查询参数的问题。每台路由器的queryParams略有不同。
允许$stateProvider在$state内定义queryParams
.state('contacts.list', {
templateUrl: 'contacts.list.html',
url: '/test?test1&test2'
data: {
customData1: 44,
customData2: "red"
}
})
此代码仅允许从queryParams获
浏览 1提问于2018-05-08得票数 0
1回答
我有一个页面，我从url传递产品id。将从外部访问此url。
下面是我的路由定义。
const routes: Routes = [
{ path: 'product/:productId', component: ProductComponent }
]
在Product component中，我订阅了这个控制台路由。
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component
浏览 2提问于2018-01-29得票数 1
我一直在尝试从其他组件访问路由器中的数据，但总是返回未定义。让代码说话。
import { Component,OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
export class AppComponent implements OnInit{
subPagetitle:string = 'test1';
constructor(private dataRouter:ActivatedRoute) {
}
浏览 0提问于2018-09-28得票数 0
1回答
在带有路由器模块v3.0.0.6alpha的angular2 rc2中，我扩展RouterOulet以检查用户在访问管理程序之前是否已登录。这就是代码：
@Directive({
selector: 'router-outlet'
})
export class LoggedInRouterOutlet extends RouterOutlet
{
publicRoutes: Array<string>;
private parentOutletMap: RouterOutletMap;
private userService:
浏览 3提问于2016-06-17得票数 3
回答已采纳
假设我有一个Component，它充当了一种主细节。我希望网址反映细节的变化-部分没有重新加载整个Component。
这就是我所拥有的：
home.routing.ts
import { ModuleWithProviders } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { HomeComponent } from "./home.component";
import { ItemListComponent } f
浏览 2提问于2016-10-04得票数 1
回答已采纳
我有一个应用程序，它有一条叫做/opportunity/:id的路线。
根据从API获取的值，我需要为上述路由加载不同的路由模块。例如:如果opportunity的类型为v2，则加载v2模块；如果其类型为v1，则加载v1模块。
早些时候：app.routing.ts
{
path: 'opportunity/:id',
loadChildren: () => import('./content/opportunity/opportunity.module').then(m => m.OpportunityMod
浏览 18提问于2020-05-19得票数 1
2回答
我有一个角度应用程序，它有以下功能:一个组件有一个文本输入和一个按钮。用户填写文本输入并单击按钮。这将更新路由器链接的URL。
路由器链路加载一个名为view的组件，然后从路由器链接读取URL参数，并将该值放在服务中并显示在组件上，这样我就知道它工作了。
因此，如果用户在文本输入中输入'abc‘，那么路由器链接URL将是/view/abc。因此，'abc‘将显示在视图组件中。有时，用户会粘贴/view/def之类的路由器链接。这可以用于更新视图组件。
我无法工作的部分是更新其他组件中的文本输入框，以反映粘贴链接的当前值。
我尝试使用'AfterViewChecked‘从
浏览 2提问于2022-05-10得票数 0
回答已采纳
目前，我正在实现一个嵌入式聊天系统，允许用户将客户端聊天应用程序嵌入到他们的网站中。使用angular 2(版本4)的客户端聊天应用程序。有两种类型的用户，代理和客户端。客户将使用其凭据和网站ID (代理注册其网站时创建)进行标识。因此，我需要将网站ID传递到客户端应用程序的每个请求中。我打算把这个网站ID放入url作为查询参数。但是，当应用程序启动时，我无法获得此值。
URL如下所示：
http://localhost:3000?site=123456
app路由如下，初始化时会根据登录状态重定向根路径：
const routes: Routes = [
{
path
浏览 4提问于2017-06-04得票数 2
目前，我正在重构一个在升级时中断的服务。我不得不替换browserdomadapter()；以及其他一些不推荐的方法。
由于来自2.1ish的各种反对意见和各种不同的变化，我不得不改变我们向组件提供这个特定服务的方式。我现在将它直接注入到组件上，我在各种答案中看到了这一点(通过角度展开)，这是推荐的实践。
以下是错误：
问题是，我已经在提供者的组件中引用注入的服务，在相关代码中可以看到如下所示：
import {Location} from "@angular/common";
import {Component, Injectable, Renderer2, Inj
浏览 3提问于2017-06-28得票数 2
我从index.html的url中删除了查询参数，但我希望在app.component.html中使用这些查询参数，并且我的app.component.ts使用ActivatedRoute，现在当我在index.html中使用此脚本时，我的app.componen.ts也无法接收这些查询参数，我如何让app.component.ts拥有我的查询参数？ 这是我在index.html中删除查询参数的脚本： <script type="text/javascript">
var url = window.location.toString();
i
浏览 6提问于2019-06-17得票数 0
回答已采纳
1回答
在我们的angular 4应用程序中，我们有多个指定的路由器插座。所以url是这样的：
让我们假设一个组件显示在一个特定的指定路由器插座中。组件在构造函数中注入了路由器、ActivatedRoute等。
该组件如何从这些注入的对象(或其他可能的对象)中检索路由器出口的名称？
浏览 5提问于2017-07-17得票数 4
1回答
我正在使用angular 2版本的rc4和路由器版本3.0.0-beta.2。
给定这个url：，我想要获取状态可选参数的值。据我所知，这段代码应该可以工作：
console.log("status", this._activatedRoute.snapshot.params['status']);
但我对此并不清楚。同样有趣的是，这段代码给了我适当的值：
console.log("urlsegment", this._activatedRoute.snapshot['_urlSegment'].pathsWithParams[0
浏览 2提问于2016-09-01得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
