Javascript 如何使用ID在angularjs 2中嵌套子路由

我的样品

我是AngularJS2的新手

如何使用第二个

已尝试为子1路由（示例1不适用于此应用）

---

children:[{path:'childone'，component:ApplicationSecondComponent}，

首先，您需要有默认的子路由，所以使用下一个路由配置：

export const AppRoutes: Routes = [
  { path: '', component: ContactsListComponent, children: [{
      path: '',
      component: ContactsDetailComponent
    }, { 
      path: 'contact/:id',
      component: ContactsDetailComponent,

      resolve: {
        contact: 'contact'
      }
    }] 
  }
];

因此，您应该在详细信息组件中使用

*nfIf

指令控制

联系人的空状态

<div *ngIf="contact">
  <h2>{{contact.name}}</h2>

  <dl>
    <dt>Twitter</dt>
    <dd>{{contact.twitter}}</dd>
  </dl>

  <p><a routerLink="/">Back to list</a></p>
</div>

请查看更新的plunker
您好，谢谢您的回答，但您提供的plunker在我单击值时没有获得值。当您选择列表项时，它会显示此列表下方的详细信息。是吗？但我之前说过-应解决此问题，重新设计以使用
。订阅
激活路径中的
，因为您的快照将仅存储第一个选择您能在plunker中解释吗？好的。单击列表中的项目后，您的详细信息将呈现在下面。这里的第一个问题-巡更详细信息组件使用以下方法获取
contact
数据：
this.contact=this.route.snapshot.data['contact']；
。有子路由的问题是，在根路由不更改之前，快照将保持不变。因此，在这里，您需要添加
this.route.params.subscribe…
以阅读路由更改并解决联系人问题。非常感谢。您能否提供一个plunker示例，以便我可以将此标记为答案
<ul>
  <li *ngFor="let contact of contacts | async">
    <a [routerLink]="['contact', contact.id]">{{contact.name}}</a>
  </li>
</ul>
<router-outlet></router-outlet>

this.contact = this.route.snapshot.data['contact'];