angular路由跳转

angular路由

使用路由 routerLink="/"
路由出口<router-outlet></router-outlet>

1.生成路由
–flat 把这个文件放进了 src/app 中，而不是单独的目录中。
–module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中
同时，会在app.module.ts里进行路由的注册

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'},//默认页面
  {path:"list",component:ListComponent},
  {path:"login",component:LoginComponent}
]

4.把RouterModule添加到@NgModule.imports数组里

imports: [RouterModule.forRoot(routes)]

5.最后

exports: [ RouterModule ] //不加的话报错，<router-outlet>is not a know element

路由跳转

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

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

2.在构造器里声明(ts文件里)：

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

如有多个声明，用“，”隔开

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

3.跳转

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

可根据实际情况添加方法，事件