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

Question

我刚刚学习如何使用 Angular 2，我目前正在使用路由。我要做的是使用子路由获取路由参数。

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

localhost:4200/user/id/details

对于这个应用程序，我使用了一个 UserComponent 和一个嵌套在用户文件夹中的 DetailsComponent。我只想能够更改 url 并在我的组件中获取 url 段。

我正在尝试获取 url 是在 DetailsComponent 的构造函数中使用来自 '@angular/router' 的 ActivatedRoute 并将其分配给 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。所以一切似乎都已到位。 router-outlet 在正确的位置，并且正确定义了路由和子路由，因为模板文件确实加载了，它只是不显示 url 段中的 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 = activateRoute.parent.snapshot.params['id'];