上级组件中的<router-outlet>。角度7

Question

我有<mat-sidenav-container>，并且在<mat-sidenav>中使用<routeroutlet>和<mat-sidenav-content>进行导航

<mat-sidenav-content class="body-sidenav">
    <router-outlet></router-outlet>
</mat-sidenav-content>

这很好！

我的路由器

{
path: 'article-section',
component: AllSectionComponent,
children: [
  {
    path: 'article-section/:id',
    component: ArticleComponent,
  },
]

}，

我需要这个模板

在我不了解的情况下，我需要在AllSectionComponent中接下来使用<routeroutlet>

这样

  <router-outlet></router-outlet>
<div class="center-folder">
 <div class="row">
  <div *ngFor="let item of articleSection"
   style="width: 100px; margin-right:10px; margin-left: 10px; margin- 
   bottom: 10px;">
    <img class="img-section" src="assets/images/docimgaes/section.png" /> 
    <br>
    <a [routerLink]="['/article-section', 1]">
      <div class="name-section">{{item.name}}</div>
    </a>
  </div>
  </div>
 </div>

但是在这种情况下，我在AllSectionComponent的头部打开对象的组件:)。而且我有两个HTML。我需要使用<routeroutlet>中的<mat-sidenav-content>正常打开。我是否需要routeroutlet的名称，或者可能有更舒适的决定？？

Answer 1

我需要的所有东西才能重新制作路由器。

从

我的路由器从这里

    {
      path: 'article-section',
       component: AllSectionComponent,
       children: [
            {
          path: 'article-section/:id',
          component: ArticleComponent,
        },
       ]

对此

       {
        path: 'article-section',
        component: AllSectionComponent,
      },
      {
        path: 'article-section/:id',
        component: ArticleComponent,
      },