Question

我有一个恒定的ROUTES设置如下：

export const ROUTES: Routes = [
    { path: 'custom', component: MyCustomComponent }
]

我想这样做，如果用户去：

http://my-angular-app/#/custom/something?mode=CRAZY

在＆＃34; MyCustomComponent＆＃34;中，我可以看到＆＃34; mode = CRAZY＆＃34;并用它做点什么。

如何访问变量＆＃34;模式＆＃34;来自我的MyCustomComponent？或者我是否必须定义一条能够传递参数的新路线？

Answer 1

这对我来说可以访问组件中的查询参数。

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-custom',
  templateUrl: './custom.component.html',
  styleUrls: ['./custom.component.css']
})
export class CustomComponent {

  constructor(private activatedRoute: ActivatedRoute) {
    let mode = activatedRoute.snapshot.queryParams['mode']; //< HERE
    console.log(mode);
  }    
}

您需要导入ActivatedRoute，并通过构造函数注入它。然后，您可以通过注入的服务访问查询字符串中的内容。

使用这样的路由器链接：

<a [routerLink]="['/custom']" [queryParams]="{mode: 'CRAZY'}">Go There!</a>

控制台日志的输出为CRAZY。

希望这有帮助。

Answer 2

如在其他答案中所述，您可以使用ActivatedRoute.snapshot.queryParam，但如果您的queryParam在您处于同一路线时更改了它的值，那么如果您需要更新值，则会遇到问题你是从queryParam得到的。由于您处于相同的路径，因此不会重新创建组件，因此您无法从构造函数中的快照中获取新值。如果您需要在同一路径中获取更新值，则应订阅que queryParam observable。

constructor(
  private route: ActivatedRoute
) {
  this.route.queryParams.subscribe((queryParams) => {
    console.log(queryParams); // get the values of your queryParams
  });
}

现在，您的queryParams上的每个新值都将在您的Component中更新。因为它是一个Angular Observable，你不会费心去处理它取消订阅，Angular会为你照顾它。

如何从angular2应用程序中的URL获取路由参数？

2 个答案: