angular初体验路由

最新推荐文章于 2021-10-11 10:30:17 发布

qq_27449993

最新推荐文章于 2021-10-11 10:30:17 发布

阅读量122

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_27449993/article/details/90899050

版权

前端专栏收录该内容

113 篇文章 2 订阅

订阅专栏

ng new uropApp 
ng serve --open
ng g module app-routing --flat --module=app
/*--flat 把这个文件放进了 src/app 中，而不是单独的目录中。
--module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中。*/
ng g component component/inspection inspection

在app-routing.module中：导入RouterModule, Routes这两个模块

import { NgModule } from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {InspectionComponent } from './component/inspection/inspection.component';
import {DashComponent} from './component/dash/dash.component';
const routes: Routes = [
  /*{path: '', redirectTo: '/inspection', pathMatch: 'full'},*/
  {path: 'inspection', component: InspectionComponent},
  {path: 'DashComponent', component: DashComponent},
  ]
@NgModule({
  declarations: [],
  imports: [RouterModule.forRoot(routes)],
})
export class AppRoutingModule { }

在app.component.html中由于要使用<router-outlet>需要app.module.ts中需要导入RouterModule

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <a routerLink="/inspection">Dashboard</a>
</div>
<h2>Here are some links to help you start: </h2>
<router-outlet></router-outlet>