在Angular中,可以使用Angular路由器来定义HTML的路径。以下是一个使用Angular路由器定义静态HTML路径的示例:
app.module.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } 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 },
{ path: '', redirectTo: '/home', pathMatch: 'full' }, // 默认路由
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.html:
这里我们定义了三个组件:HomeComponent、AboutComponent和ContactComponent,并在app.module.ts中配置了路由。在app.component.html中使用routerLink指令来导航到相应的路径,并通过router-outlet组件来显示当前路径对应的组件。
这样,当用户点击导航链接时,Angular会根据路由配置显示相应的组件。例如,当用户点击Home链接时,会显示HomeComponent的内容。