Question

我正在尝试在单个页面应用程序中使用到的路由，到目前为止，我已经设置了所有内容。但是问题是，孩子们最初不会显示在路由器电源插座中，我必须在它显示之前单击导航。

这就是我到目前为止所得到的

Routing.ts

export const routes: Route[] = [
{
path: '',
component: OGComponent,
children: [
  {
    path: 'check',
    component: CheckComponent
  },
  {
    path: 'check/:id',
    component: CheckInfoComponent
  },
  {
    path: 'Company',
    component: CompanyComponent
  },

  {
    path: 'versions',
    component: VersionsComponent
  },
  {
    path: 'Home',
    component: HomeComponent,
    children: [
      {
        path: 'Contact',
        component: ContactComponent
      },
      {
        path: 'About',
        component: AboutComponent
      },
    ]
  },
]

} ];

HTML

<div *ngFor="let section of homeSec">
    <mat-list-item class="title">{{section.name}}</mat-list-item>
    <div *ngFor="let subSection of section?.subSections">
        <mat-list-item>
            <a mat-list-item routerLink="{{subSection.name}}" routerLinkActive="active-list-item">{{subSection.name}}</a>
        </mat-list-item>
    </div>
</div>
<router-outlet></router-outlet>

Answer 1

添加带有重定向到首页的空路径。

{ path: '', redirectTo: 'Company', pathMatch: 'full' },

如下所示：

export const routes: Route[] = [
{
path: '',
component: OGComponent,
children: [
    { path: '', redirectTo: 'Company', pathMatch: 'full' },
  {
    path: 'check',
    component: CheckComponent
  },
  {
    path: 'check/:id',
    component: CheckInfoComponent
  },
  {
    path: 'Company',
    component: CompanyComponent
  },

  {
    path: 'versions',
    component: VersionsComponent
  },
  {
    path: 'Home',
    component: HomeComponent,
    children: [
      {
        path: 'Contact',
        component: ContactComponent
      },
      {
        path: 'About',
        component: AboutComponent
      },
    ]
  },
],
}
];

路由器插座直到点击路由器后才会显示

1 个答案: