angular路由的配置

1、创建组件(命令行)

ng g c components/spatialLocationMemorySpan

2、app.module.ts中进行引入

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

import { SpatialLocationMemorySpanComponent } from './compontents/spatial-location-memory-span/spatial-location-memory-span.component';

imports: [

RouterModule.forRoot(appRoutes)

]

3、进行基础的配置

//创建路由

const appRoutes:Routes = [

{path:'spatialLocationMemorySpan',component:SpatialLocationMemorySpanComponent}

]

4、在别的页面中可以使用

<a routerLink="/detail/1" routerLinkActive="active">detail</a>

<router-outlet></router-outlet>

 

基础路由访问成功

 

如何在本地跳转路由ts文件进行跳转

(1)、引用路由模块

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

(2)、注册路由服务

constructor(public router: Router) {}

(3)、在方法中使用

  onSubmit({ value, valid }: { value: any; valid: boolean }) {

    if (!valid) {

      this.router.navigate(["add-user"]);

      alert("验证shibai");

    } else {

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

      alert("验证成功");

    }

  }

 

路由的详情配置：app.module.ts中

{ path: "user/:id", component: AddUserComponent }

Html:

<td><a [routerLink]="['user/' + item.id]">详情</a></td>

 

如何获得浏览器的路由参数？

(1)、引入路由相关模块

import { ActivatedRoute, Router, Params } from "@angular/router";

(2)、constructor中注册服务

id: number;

  constructor(public route: ActivatedRoute) {}

(3)、 

ngOnInit() {

    this.id = this.route.snapshot.params["id"];

    console.log(this.id);

  }