在Angular中,导航到嵌套路由时无法获取CSS文件的问题通常是由于路径不正确引起的。以下是一个解决该问题的示例代码:
标签,用于显示嵌套路由的内容。
// 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';
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
// home.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'] // 确保正确引入 CSS 文件
})
export class HomeComponent { }
在上述示例中,可以将 CSS 文件放在项目的根目录下,并使用相对路径进行引入。如果 CSS 文件位于其他目录,则需要根据实际情况进行路径设置。
通过以上步骤,应该能够解决导航到嵌套路由时无法获取 CSS 文件的问题。