Question

在routable component我有

@RouteConfig {
  {path: '/login',   name: 'Login', component: LoginComponent}
}

但是，如果我转到app_url/login?token=1234？

，如何获取查询参数

Answer 1

现在不推荐使用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是文档

Answer 2

为了补充前两个答案，Angular2支持路由中的查询参数和路径变量。在@RouteConfig定义中，如果在路径中定义参数，Angular2会将它们作为路径变量处理，如果不是，则将其作为查询参数处理。

我们来一个样本：

@RouteConfig([
  { path: '/:id', component: DetailsComponent, name: 'Details'}
])

如果你像这样调用路由器的navigate方法：

this.router.navigate( [
  'Details', { id: 'companyId', param1: 'value1'
}]);

您将拥有以下地址：/companyId?param1=value1。获取参数的方法对于查询参数和路径变量都是相同的。它们之间的区别在于路径变量可以看作是必需参数，查询参数可以看作是可选参数。

希望它可以帮到你，亨利

UPDATE：路由器alpha.31更改后，http查询参数不再有效（Matrix params #2774）。相反，角度路由器使用所谓的矩阵URL表示法。

参考https://angular.io/docs/ts/latest/guide/router.html#!#optional-route-parameters：

可选路由参数不用＆＃34;？＆＃34;和＆＃34;＆amp;＆＃34;像他们将在URL查询字符串中。它们用分号隔开＆＃34 ;;＆＃34; 这是矩阵URL表示法 - 您可能以前从未见过。

Answer 3

RouteParams似乎不再存在，并被ActivatedRoute取代。 ActivatedRoute允许我们访问矩阵网址表示法参数。如果我们想要获取查询字符串?参数，我们需要使用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);

Answer 4

这对我有用（从Angular 2.1.0开始）：

constructor(private route: ActivatedRoute) {}
ngOnInit() {
  // Capture the token  if available
  this.sessionId = this.route.snapshot.queryParams['token']

}

Answer 5

（仅限Childs Route / / hello-world）

如果你想打这种电话：

<强> /你好世界富=栏＆安培;水果=香蕉

Angular2不使用？，也不使用＆amp; ，而使用; 。所以正确的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
}

来源：https://angular.io/docs/ts/latest/guide/router.html

Answer 6

Angular2 v2.1.0 （稳定）：

ActivatedRoute提供了一个可以订阅的可观察文件。

  constructor(
     private route: ActivatedRoute
  ) { }

  this.route.params.subscribe(params => {
     let value = params[key];
  });

每次路由更新时都会触发：/ home / files / 123 - ＆gt; /家庭/文件/ 321

Answer 7

Angular 4：

我已经包含了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

Answer 8

对于Angular 4

<强> URL：

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

Answer 9

根据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');
   }
}

Answer 10

Angular 5+更新

route.snapshot提供route参数的初始值地图。您可以直接访问参数，而无需订阅或添加可观察的运算符。编写和阅读要简单得多：

Angular Docs的引用

要为您分解一下，以下是使用新路由器的方法：

Post

然后在登录组件中（注意新添加的this.router.navigate(['/login'], { queryParams: { token:'1234'} }); ）：

.snapshot

Answer 11

在Angular 6中，我发现了这种更简单的方法：

navigate(["/yourpage", { "someParamName": "paramValue"}]);

然后在构造函数或ngInit中可以直接使用：

let value = this.route.snapshot.params.someParamName;

Answer 12

在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>

如何处理角度2

12 个答案:

Angular 4：

Angular 5+更新