angular - 如何获取查询参数？ Angular 2

Question

我想在我的子组件中使用变量“?search=value”。

根组件配置:

@RouteConfig([
    { path: '...', name: 'Project', component: ProjectComponent, useAsDefault: true}
])
class App {}

子组件配置:

@RouteConfig([
    { path: '/', name: 'List', component: ProjectListComponent, useAsDefault: true }
])
export class ProjectComponent{
    constructor(
        private _routeParams: RouteParams
    ){
        console.log(this._routeParams.get('search'))
    }

我打开

localhost:3000/?search=example

我看到了(自身变化)

http://localhost:3000/;search=example?search=example  // wtf???

和

console.log(this._routeParams.get('search')); // example

我打开

http://localhost:3000/;search=example

我明白了

http://localhost:3000/

和

console.log(this._routeParams.get('search')); // null - wtf???

请帮忙=)

Answer 1

这似乎是路由器的 Angular 落案例。 ... 是非终端路由标记，它与/... 相同，ProjectComponent 始终在导航期间加载，因为它匹配每个网址。 ProjectListComponent 映射到 / 因此它有效地映射到与 ProjectComponent 相同的路由但由于继承而被视为子路由 - 某种冲突，这两个组件都在同一个 url 上。子路由器参数以;开头(矩阵参数)，问号?仅用于主路由器参数。

子路由器和父路由器都捕获参数:

http://localhost:3000/?search=example

主路由器需要 ? 所以它不捕获参数:

http://localhost:3000/;search=example

同时 useAsDefault 添加了它的位:

If true, the child route will be navigated to if no child route is specified during the navigation.

我敢打赌您看到的导航变化是由这个参数引起的。如果不调试，很难说它到底是如何工作的。