在Angular 9中,可以使用ActivatedRoute
来获取当前激活的路由信息,并通过routerLinkActive
指令来添加激活的样式。
以下是一个示例,演示了如何在Angular 9中实现多个路由被激活时的解决方法:
首先,确保你已经安装了Angular的最新版本:
npm install -g @angular/cli
然后,创建一个新的Angular项目:
ng new my-app
进入项目目录:
cd my-app
创建一个名为app.component.html
的组件模板文件,添加以下代码:
- Home
- About
- Contact
创建一个名为app.component.ts
的组件文件,添加以下代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent { }
创建一个名为app-routing.module.ts
的路由模块文件,添加以下代码:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
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 },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [HomeComponent, AboutComponent, ContactComponent];
创建名为home.component.ts
、about.component.ts
和contact.component.ts
的组件文件,分别添加以下代码:
import { Component } from '@angular/core';
@Component({
template: 'Home Component
'
})
export class HomeComponent { }
@Component({
template: 'About Component
'
})
export class AboutComponent { }
@Component({
template: 'Contact Component
'
})
export class ContactComponent { }
在app.module.ts
中导入AppRoutingModule
并添加到imports
数组中:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule, routingComponents } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
routingComponents
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
现在,你可以在浏览器中运行项目:
ng serve
打开浏览器,在地址栏输入http://localhost:4200
,即可看到导航菜单。当你点击不同的菜单项时,对应的路由将被激活,并且添加了active
样式类。
希望这个示例能帮助你解决在Angular 9中多个路由被激活的问题。