在我的routable component我有
@RouteConfig {
{path: '/login', name: 'Login', component: LoginComponent}
}
但是，如果我去，我如何获得查询参数app_url/login?token=1234？
问问题
124040 次
12 回答
51
RouteParams 现在已弃用，所以这里是如何在新路由器中执行此操作。
this.router.navigate(['/login'],{ queryParams: { token:'1234'}})
然后在登录组件中，您可以获取参数，
constructor(private route: ActivatedRoute) {}
ngOnInit() {
// Capture the token if available
this.sessionId = this.route.queryParams['token']
}
这是文档
于 2016-08-17T12:48:56.223 回答
50
为了补充前面的两个答案，Angular2 在路由中支持查询参数和路径变量。在@RouteConfig定义中，如果您在路径中定义参数，Angular2 会将它们作为路径变量处理，如果没有，则作为查询参数处理。
让我们举个例子：
@RouteConfig([
{ path: '/:id', component: DetailsComponent, name: 'Details'}
])
如果你这样调用navigate路由器的方法：
this.router.navigate( [
'Details', { id: 'companyId', param1: 'value1'
}]);
您将获得以下地址：/companyId?param1=value1。获取参数的方式对于查询参数和路径变量都是相同的。它们之间的区别在于，路径变量可以看作是强制参数，而查询参数可以看作是可选参数。
希望它可以帮助你，蒂埃里
更新：更改路由器 alpha.31 http 查询参数后不再起作用（矩阵参数 #2774）。相反，角度路由器使用所谓的矩阵 URL 表示法。
参考https://angular.io/docs/ts/latest/guide/router.html#!#optional-route-parameters：
可选路由参数不以“？”分隔 和“&”，就像它们在 URL 查询字符串中一样。它们用分号“;”隔开 这是矩阵 URL 表示法——您以前可能没有见过。
于 2016-01-05T13:19:44.043 回答
20
好像已经RouteParams不存在了，取而代之ActivatedRoute。ActivatedRoute让我们可以访问矩阵 URL 符号参数。如果我们想获得查询字符串?参数，我们需要使用Router.RouterState. 传统的查询字符串参数在路由中保持不变，这可能不是预期的结果。现在在路由器 3.0.0-rc.1 中保留片段是可选的。
import { Router, ActivatedRoute } from '@angular/router';
@Component ({...})
export class paramaterDemo {
private queryParamaterValue: string;
private matrixParamaterValue: string;
private querySub: any;
private matrixSub: any;
constructor(private router: Router, private route: ActivatedRoute) { }
ngOnInit() {
this.router.routerState.snapshot.queryParams["queryParamaterName"];
this.querySub = this.router.routerState.queryParams.subscribe(queryParams =>
this.queryParamaterValue = queryParams["queryParameterName"];
);
this.route.snapshot.params["matrixParameterName"];
this.route.params.subscribe(matrixParams =>
this.matrixParamterValue = matrixParams["matrixParameterName"];
);
}
ngOnDestroy() {
if (this.querySub) {
this.querySub.unsubscribe();
}
if (this.matrixSub) {
this.matrixSub.unsubscribe();
}
}
}
我们应该能够?在导航时操纵符号以及;符号，但我只让矩阵符号起作用。附加到最新路由器文档的plnker显示它应该如下所示。
let sessionId = 123456789;
let navigationExtras = {
queryParams: { 'session_id': sessionId },
fragment: 'anchor'
};
// Navigate to the login page with extras
this.router.navigate(['/login'], navigationExtras);
于 2016-07-22T00:20:06.450 回答
17
这对我有用（从 Angular 2.1.0 开始）：
constructor(private route: ActivatedRoute) {}
ngOnInit() {
// Capture the token if available
this.sessionId = this.route.snapshot.queryParams['token']
}
于 2016-11-05T20:49:38.057 回答
5
（仅适用于 Childs Route，例如 /hello-world）
如果您想拨打这种电话：
/hello-world?foo=bar&fruit=banana
Angular2 不使用？也不是&但是; 反而。所以正确的 URL 应该是：
/hello-world;foo=bar;fruit=banana
并获取这些数据：
import { Router, ActivatedRoute, Params } from '@angular/router';
private foo: string;
private fruit: string;
constructor(
private route: ActivatedRoute,
private router: Router
) {}
ngOnInit() {
this.route.params.forEach((params: Params) => {
this.foo = params['foo'];
this.fruit = params['fruit'];
});
console.log(this.foo, this.fruit); // you should get your parameters here
}
于 2016-09-26T09:23:31.673 回答
5
Angular2 v2.1.0（稳定版）：
ActivatedRoute 提供了一个可以订阅的 observable。
constructor(
private route: ActivatedRoute
) { }
this.route.params.subscribe(params => {
let value = params[key];
});
这也会在每次更新路由时触发：/home/files/123 -> /home/files/321
于 2016-11-21T12:50:36.470 回答
3
在 Angular 7+ 中执行此操作的简单方法是：
在 ?-routing.module.ts 中定义路径
{ path: '/yourpage', component: component-name }
在你的组件中导入 ActivateRoute 和 Router 模块，并在构造函数中注入它们
contructor(private route: ActivateRoute, private router: Router){ ... }
将 ActivateRoute 订阅到 ngOnInit
ngOnInit() {
this.route.queryParams.subscribe(params => {
console.log(params);
// {page: '2' }
})
}
将其提供给链接：
<a [routerLink]="['/yourpage']" [queryParams]="{ page: 2 }">2</a>
于 2019-08-19T16:47:12.903 回答
2
对于角 4
网址：
http://example.com/company/100
路由器路径：
const routes: Routes = [
{ path: 'company/:companyId', component: CompanyDetailsComponent},
]
零件：
@Component({
selector: 'company-details',
templateUrl: './company.details.component.html',
styleUrls: ['./company.component.css']
})
export class CompanyDetailsComponent{
companyId: string;
constructor(private router: Router, private route: ActivatedRoute) {
this.route.params.subscribe(params => {
this.companyId = params.companyId;
console.log('companyId :'+this.companyId);
});
}
}
控制台输出：
公司编号：100
于 2017-06-07T10:43:33.160 回答
2
角度 4：
我在下面包含了 JS（用于 OG）和 TS 版本。
.html
<a [routerLink]="['/search', { tag: 'fish' } ]">A link</a>
在上面我使用链接参数数组，请参阅下面的来源以获取更多信息。
路由.js
(function(app) {
app.routing = ng.router.RouterModule.forRoot([
{ path: '', component: indexComponent },
{ path: 'search', component: searchComponent }
]);
})(window.app || (window.app = {}));
searchComponent.js
(function(app) {
app.searchComponent =
ng.core.Component({
selector: 'search',
templateUrl: 'view/search.html'
})
.Class({
constructor: [ ng.router.Router, ng.router.ActivatedRoute, function(router, activatedRoute) {
// Pull out the params with activatedRoute...
console.log(' params', activatedRoute.snapshot.params);
// Object {tag: "fish"}
}]
}
});
})(window.app || (window.app = {}));
路由.ts（摘录）
const appRoutes: Routes = [
{ path: '', component: IndexComponent },
{ path: 'search', component: SearchComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
// other imports here
],
...
})
export class AppModule { }
搜索组件.ts
import 'rxjs/add/operator/switchMap';
import { OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
export class SearchComponent implements OnInit {
constructor(
private route: ActivatedRoute,
private router: Router
) {}
ngOnInit() {
this.route.params
.switchMap((params: Params) => doSomething(params['tag']))
}
更多信息：
“链接参数数组” https://angular.io/docs/ts/latest/guide/router.html#!#link-parameters-array
“Activated Route - 路线信息的一站式商店” https://angular.io/docs/ts/latest/guide/router.html#!#activated-route
于 2017-05-26T01:22:24.257 回答
1
在 Angular 6 中，我发现了这种更简单的方法：
navigate(["/yourpage", { "someParamName": "paramValue"}]);
然后在构造函数中或者在ngInit你可以直接使用：
let value = this.route.snapshot.params.someParamName;
于 2019-03-23T01:51:59.577 回答
1
根据Angular2 文档，您应该使用：
@RouteConfig([
{path: '/login/:token', name: 'Login', component: LoginComponent},
])
@Component({ template: 'login: {{token}}' })
class LoginComponent{
token: string;
constructor(params: RouteParams) {
this.token = params.get('token');
}
}
于 2016-01-04T20:27:02.920 回答
1
Angular 5+ 更新
route.snapshot 提供了路由参数映射的初始值。您可以直接访问参数，而无需订阅或添加可观察运算符。写和读要简单得多：
来自Angular 文档的引用
为您分解它，以下是使用新路由器的方法：
this.router.navigate(['/login'], { queryParams: { token:'1234'} });
然后在登录组件中（注意新.snapshot添加的）：
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.sessionId = this.route.snapshot.queryParams['token']
}
于 2018-08-22T13:10:11.370 回答