首页 > 解决方案 > 从上层组件。角 7

问题描述

我有<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,
  },
]

},

我需要这个模板

在此处输入图像描述

正如我不明白的那样,我需要<routeroutlet>AllSectionComponent 中的下一个

这样的

  <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 还是有更舒适的决定???

标签: angular

解决方案


我只需要它来改造我的路由器。

由此

我的路由器从此

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

对此

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

推荐阅读