Question

我只是学习如何使用Angular 2，我目前正在使用路线。我尝试做的是使用子路径获取路由参数。

我目前正在开发一个可以显示用户详细信息的应用程序。网址看起来像这样。

本地主机：4200 /用户/ ID /细节

对于此应用程序，我使用的是UserComponent和嵌套在用户文件夹中的DetailsComponent。我只是希望能够更改网址并获取我的组件中的网址段。

我正在尝试获取网址正在使用来自＆＃39; @ angular / router＆＃39;的ActivatedRoute。在DetailsComponent的构造函数中，并将其分配给id属性，我使用字符串插值在模板中查看它。以下是DetailsComponent的实际代码：

import { Component, OnInit, OnDestroy  } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs/Rx';

@Component({
selector: 'app-details',
templateUrl: './details.component.html',
styles: []
})
export class DetailsComponent implements OnInit, OnDestroy {


id: string;

private subscription : Subscription;

constructor( private router: Router, private activatedRoute: ActivatedRoute ) { 
    this.subscription = activatedRoute.params.subscribe(
        (param: any) => this.id = param['id']
    );
}

ngOnInit() {
}

ngOnDestroy() {
this.subscription.unsubscribe();
}
}

但是参数未更新并显示在模板文件中。这种方法有效，因为它是我在另一个组件中使用的确切代码，我能够在模板文件中显示id。所以一切似乎都到位了。路由器插座位于正确的位置，路由和子路由正确定义，因为模板文件确实加载，它只是不显示网址段的ID。

这基本上是我稍后使用某种类型的数据库进行映像的方式，我基本上只是希望能够获取该段以便稍后从数据库中获取信息。所以我不确定为什么这不起作用。我应该使用queryParameters吗？或者可以这样做，有一个漂亮的网址？如果是的话，我做错了什么？

这是路线这些路由在用户目录

中定义

import { Routes } from '@angular/router';

import { DetailsComponent } from './details.component';
import { EditComponent } from './edit.component';

export const USER_ROUTES: Routes = [
{ path: 'details', component: DetailsComponent },
{ path: 'edit', component: EditComponent }
];

这是app.routing.ts文件

import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { ProductComponent } from './product/product.component';
import { ProductsComponent } from './products/products.component';
import { UserComponent } from './user/user.component';
import { USER_ROUTES } from './user/user.routes';

const APP_ROUTES: Routes = [
{ path: 'user/:id', component: UserComponent, children: USER_ROUTES },
{ path: 'user', component: UserComponent },  
{ path: 'products/:id', component: ProductsComponent },
{ path: 'products', component: ProductComponent },
{ path: '', component: HomeComponent }

];

export const routing = RouterModule.forRoot(APP_ROUTES);

在详细的html模板中我有

<p>You are currently viewing the details of User number {{ id }}.</p>

在用户html模板中我有

<p>User Component</p>
<router-outlet></router-outlet>

Answer 1

您正在尝试访问路径的参数（id）

{ path: 'user/:id', component: UserComponent, children: USER_ROUTES }

来自路线的组成部分

{ path: 'details', component: DetailsComponent }

，它没有任何id参数，但是具有此参数的路由的子节点。所以你需要从父路线获取参数：

this.subscription = activatedRoute.parent.params.subscribe(
    (param: any) => this.id = param['id']
);

Answer 2

在 ngOnInit 中写这个。

this.id = activationRoute.parent.snapshot.params['id'];

Angular 2使用Child路由获取url参数

2 个答案: