javascript - Angular-如何使用重复组件路由父/子？

Question

我正在尝试找出最简洁的方式来设置我的 Angular 路由。

我有一条父路线，在孩提时代，我想多次重复相同的组件（所有位置的列表）。每个位置（子）组件的出现看起来都是一样的，只是需要传入不同的数据。（我将使用 *ngFor 执行此操作）。

到目前为止，这是我的想法：

<router-outlet>//for the parent 

    <router-outlet name="aux">
         <ul *ngFor="let location in service.locations"
    </router-outlet>
       //where I list out all the locations^

</router-outlet>

在我的 app-routing.module.ts 文件中：

const routes: Routes = [
  { path: 'main', component: MainComponent }, //lists all locations
  { path: 'locations/:id', component: LocationsComponent }, //view 1 
    location
  { path: '', pathMatch: 'full', redirectTo: '/main},
];

（我想让父母和孩子都出现在初始加载中。我应该修改它吗？^）

现在这是我不太了解的部分，我需要设置我的路由配置。这很近吗？它是否也在我的 app-routing.module.ts 文件中？

@RouteConfig([
  {path:'/', name: 'MainPath', component: MainComponent, 
   useAsDefault: true},
  {aux:'/auxRoute', name: 'AuxPath', component: SecondComponent}
])

谢谢！如果您需要澄清，请告诉我。

标签： javascripthtmlangular