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

Question

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

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

本地主机：4200/用户/ID/详细信息

对于这个应用程序，我使用了一个 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。所以一切似乎都到位了。路由器出口在正确的位置，路由和子路由被正确定义，因为模板文件确实加载了，它只是不显示来自 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']
);