在我的routable component我有
@RouteConfig {
{path: '/login', name: 'Login', component: LoginComponent}
}
但是，如果我去app_url/login?token=1234，如何获得查询参数？
为了补充前两个答案，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查询参数不再起作用（Matrix params #2774）。相反，角度路由器使用所谓的Matrix URL表示法。
参考https://angular.io/docs/ts/latest/guide/router.html#!#optional-route-parameters：
可选的路由参数不以“？”分隔和“＆”，因为它们将在URL查询字符串中。它们用分号分隔“;”这是矩阵URL表示法 - 您可能以前从未见过的。
route.snapshot提供路由参数映射的初始值。您可以直接访问参数而无需订阅或添加可观察的运算符。写和读更简单：
引用来自Angular Docs
为了解决这个问题，以下是使用新路由器的方法：
this.router.navigate(['/login'], { queryParams: { token:'1234'} });
然后在登录组件中（注意添加了新的.snapshot）：
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.sessionId = this.route.snapshot.queryParams['token']
}
在Angular 6中，我发现了这种更简单的方法：
navigate(["/yourpage", { "someParamName": "paramValue"}]);
然后在构造函数或ngInit中，您可以直接使用：
let value = this.route.snapshot.params.someParamName;
RouteParams现已弃用，所以这里是如何在新路由器中执行此操作。
this.router.navigate(['/login'],{ queryParams: { token:'1234'}})
然后在登录组件中，您可以获取参数，
constructor(private route: ActivatedRoute) {}
ngOnInit() {
// Capture the token if available
this.sessionId = this.route.queryParams['token']
}
Here是文档
似乎RouteParams不再存在，并被ActivatedRoute取代。 ActivatedRoute让我们可以访问矩阵URL表示法参数。如果我们想获得查询字符串?参数，我们需要使用Router.RouterState。
traditional query string paramaters在路由中持续存在，这可能不是理想的结果。
现在，在路由器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相关的router documentation显示它应该是这样的。
let sessionId = 123456789;
let navigationExtras = {
queryParams: { 'session_id': sessionId },
fragment: 'anchor'
};
// Navigate to the login page with extras
this.router.navigate(['/login'], navigationExtras);
这对我有用（从Angular 2.1.0开始）：
constructor(private route: ActivatedRoute) {}
ngOnInit() {
// Capture the token if available
this.sessionId = this.route.snapshot.queryParams['token']
}
（仅限Childs Route / / hello-world）
如果您想进行此类通话：
/你好世界？富=酒吧和水果=香蕉
Angular2不使用？也不是;代替。所以正确的URL应该是：
/你好世界;富=酒吧;水果=香蕉
并获得这些数据：
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
}
Angular2 v2.1.0（稳定）：
ActivatedRoute提供可订阅的可观察对象。
constructor(
private route: ActivatedRoute
) { }
this.route.params.subscribe(params => {
let value = params[key];
});
每次路由更新时都会触发：/ home / files / 123 - > / home / files / 321
我已经在下面包含了JS（针对OG）和TS版本。
html的
<a [routerLink]="['/search', { tag: 'fish' } ]">A link</a>
在上面我使用链接参数数组请参阅下面的源代码以获取更多信息。
routing.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 = {}));
routing.ts（摘录）
const appRoutes: Routes = [
{ path: '', component: IndexComponent },
{ path: 'search', component: SearchComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
// other imports here
],
...
})
export class AppModule { }
searchComponent.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
“激活的路线 - 路线信息的一站式商店”https://angular.io/docs/ts/latest/guide/router.html#!#activated-route
对于Angular 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);
});
}
}
控制台输出：
companyId：100
根据Angular2 documentation你应该使用：
@RouteConfig([
{path: '/login/:token', name: 'Login', component: LoginComponent},
])
@Component({ template: 'login: {{token}}' })
class LoginComponent{
token: string;
constructor(params: RouteParams) {
this.token = params.get('token');
}
}