在angular 7中使用side-nav在组件之间导航

在Angular 7中使用side-nav在组件之间导航，可以通过以下步骤实现：

首先，在Angular项目中安装Angular Material库，它提供了一套现成的UI组件，包括side-nav组件。可以使用以下命令进行安装：

npm install @angular/material @angular/cdk @angular/animations

在app.module.ts文件中导入所需的Angular Material模块：

import { MatSidenavModule } from '@angular/material/sidenav';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    MatSidenavModule,
    BrowserAnimationsModule
  ],
  ...
})
export class AppModule { }

在组件的HTML模板中添加side-nav组件，并设置相应的导航链接：

<mat-sidenav-container>
  <mat-sidenav mode="side" opened>
    <mat-nav-list>
      <a mat-list-item routerLink="/home">Home</a>
      <a mat-list-item routerLink="/about">About</a>
      <a mat-list-item routerLink="/contact">Contact</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

在组件的路由配置文件中设置相应的路由路径：

import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
import { ContactComponent } from './contact.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

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