要实现Angular 8和Material设计导航栏,并显示选定的项目,可以按照以下步骤进行操作:
首先,确保已经安装了Angular CLI,并创建一个新的Angular项目。
在终端中运行以下命令来安装Angular Material和相关依赖项:
npm install @angular/material @angular/cdk @angular/animations
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatListModule } from '@angular/material/list';
@NgModule({
imports: [
// ...
MatToolbarModule,
MatIconModule,
MatButtonModule,
MatListModule
],
// ...
})
export class AppModule { }
Navigation
Home
About
Contact
.mat-list-item.active {
background-color: rgba(0, 0, 0, 0.1);
}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/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 { }
现在,当在导航栏中选择一个项目时,该项目将突出显示,并且相应的组件将在