Question

我的app.component.html文件中有以下html模板

`
<app-layout>
    <mat-sidenav-container>
        <mat-sidenav #sidenav role="navigation">
            <app-sidenav-list (sidenavClose)="sidenav.close()"></app-sidenav-list>
        </mat-sidenav>
        <mat-sidenav-content>
            <app-header (sidenavToggle)="sidenav.toggle()"></app-header>
            <main>
              <router-outlet></router-outlet>
              <app-home></app-home>
            </main>
        </mat-sidenav-content>
    </mat-sidenav-container>
</app-layout>
`

我的路线配置模块如下

`
const routes: Routes = [
  { path: '', component: HomeView },
  { path: 'not-found', component: PageNotFoundComponent, pathMatch: 'full' },
  { path: '**', redirectTo: 'not-found'}
];

@NgModule({
  imports: [RouterModule.forRoot(
    routes, 
    {enableTracing: true}
    )
  ]
  exports: [RouterModule]
})
export class AppRoutingModule { }
`

每当我在URL中导航到/ asdf时，我都会正确地重定向到未找到的路由。未找到页面的组件的模板显示在主页组件内容上方的页面顶部。当用户键入错误的URL时，我想隐藏/删除Home组件的内容。我该如何实现？我尝试做pathMatch：'full'，但这没有用。有什么建议吗？

Answer 1

您的问题出在布局上，因为router-oulet和<app-home>处于同一级别。您必须确保更改导航到页面的方式，因为导航生成的所有页面都将与您的主页一起显示。

<app-layout>
<mat-sidenav-container>
    <mat-sidenav #sidenav role="navigation">
        <app-sidenav-list (sidenavClose)="sidenav.close()"></app-sidenav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <app-header (sidenavToggle)="sidenav.toggle()"></app-header>
        <main>
          <!-- Its there your problem -->
          <router-outlet></router-outlet>
          <app-home></app-home>
        </main>
    </mat-sidenav-content>
</mat-sidenav-container>

更改路线总是显示主要组成部分，如何在特定路线上将其隐藏/从视图中删除？

1 个答案: