angular路由

使用路由 routerLink="/"
路由出口<router-outlet></router-outlet>
1.生成路由
--flat 把這個(gè)文件放進(jìn)了 src/app 中，而不是單獨(dú)的目錄中。
--module=app 告訴 CLI 把它注冊(cè)到 AppModule 的 imports 數(shù)組中
同時(shí)，會(huì)在app.module.ts里進(jìn)行路由的注冊(cè)

ng generate module app-routing --flat --module=app      //生成路由

2.在app-routing.module.ts引入路由

import {RouterModule, Routes} from '@angular/router';

3.定義路由

const routes:Routes=[
  {path:"",component: IndexComponent,pathMatch:'full'},//默認(rèn)頁面
  {path:"list",component:ListComponent},
  {path:"login",component:LoginComponent}
]

4.把RouterModule添加到@NgModule.imports數(shù)組里

imports: [RouterModule.forRoot(routes)]

5.最后

exports: [ RouterModule ] //不加的話報(bào)錯(cuò)，<router-outlet>is not a know element

通過事件路由跳轉(zhuǎn)

1.在ts文件引入Router(不是Routers)

import {Router} from '@angular/router';

2.在構(gòu)造器里聲明(ts文件里)：

constructor(private router:Router){}/*聲明路由*/

如有多個(gè)聲明，用“，”隔開

constructor(private router:Router,private http: HttpClient) { }

3.跳轉(zhuǎn)

this.router.navigate(['']);

可根據(jù)實(shí)際情況添加方法，事件