要将侧边栏添加到仅几个页面中,可以使用Angular Material的MatSidenav
组件结合路由来实现。下面是一个示例解决方案:
首先,安装Angular Material和Angular的路由模块:
npm install @angular/material @angular/cdk @angular/router
然后,在你的Angular项目中导入所需的模块:
import { NgModule } from '@angular/core';
import { MatSidenavModule } from '@angular/material/sidenav';
import { RouterModule } from '@angular/router';
@NgModule({
imports: [
MatSidenavModule,
RouterModule
],
exports: [
MatSidenavModule
]
})
export class MaterialModule { }
接下来,创建一个包含侧边栏的组件,比如SidebarComponent
:
在你的路由模块中,将SidebarComponent
添加到仅需要侧边栏的页面的路由配置中:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SidebarComponent } from './sidebar/sidebar.component';
import { Page1Component } from './page1/page1.component';
import { Page2Component } from './page2/page2.component';
const routes: Routes = [
{
path: '',
component: SidebarComponent,
children: [
{ path: 'page1', component: Page1Component },
{ path: 'page2', component: Page2Component }
]
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
这样,当导航到page1
或page2
时,侧边栏将被显示。
最后,将MaterialModule
和AppRoutingModule
导入到你的根模块中,并在根组件的模板中添加
:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MaterialModule } from './material.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
SidebarComponent,
Page1Component,
Page2Component
],
imports: [
BrowserModule,
MaterialModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
现在,当访问/page1
或/page2
时,将显示侧边栏。其他页面将不包含侧边栏。