Angular2在不同的url上新的组件对象答案

【问题标题】：Angular2 new component object on different urlAngular2在不同的url上新的组件对象
【发布时间】：2016-11-23 13:21:40
【问题描述】：

我有 PageComponent 哪些数据在不同的 url 上更新（通过使用 PageService）。它使用相同的PageComponent 对象。我希望 PageComponent 是新 url 上的新对象。

const routes: Routes = [
    {path: ':uri', component: PageComponent}
];

【问题讨论】：

【解决方案1】：

如果您使用 Angular 2 路由，则会有一个 index.html 页面，并且组件将根据 URL 中的路径进行更改。

例如

RouterModule.forRoot([
  { path: 'heroes', component: HeroesComponent},
  { path: 'details', component: HeroesDetailComponent}
])

当 URL 为 /heroes 时，它将加载 HeroesComponent <router-outlet> 在 index.html 页面中，当 URL 为 /details 时，它将在 <router-outlet> 的位置加载 HeroesDetailComponent。

详情可以阅读以下网址

https://angular.io/docs/ts/latest/tutorial/toh-pt5.html

【讨论】：

【解决方案2】：

您可以对路由的页面使用相同的PageComponent。如果您需要在此页面上进行其他路由，您可以将<router-outlet/> 放入页面模板并在其上提供其他组件。

const routes: Routes = [
    {path: ':uri1', component: Component1},
    {path: ':uri2', component: Component2},
    ...
];

【讨论】：