angular如何引用并且使用路由以及如何获得相关参数

1、app.module.ts中引入路由 (注意引入两个组件之间必须要有空格，否则会报错)

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

//设置路由

const appRoutes:Routes = [

  {path:"",component:HomeComponent},

  {path:"login",component:LoginComponent},

  {path:"regsiter",component:RegisterComponent}

]

 imports: [

    RouterModule.forRoot(appRoutes)

  ],

在需要的页面中直接使用

<router-outlet></router-outlet>

 

<a routerLink="graphRule">图形规律</a>

 

2、如何在本地跳转路由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);

  }

 

2、设置和获得路由参数

1)、设置路由参数

 this.router.navigate(['/account/' + this.dataRouter[0].normalForm.templateName],{ queryParams: { templateName: this.dataRouter[0].normalForm.templateName} });

如何获得路由参数

引用API: import { ActivatedRoute, Params } from ‘@angular/router’;

注册服务

constructor(public route: ActivatedRoute)

直接获取

 this.route.queryParams.subscribe((params: Params) => {

      this.templateName = params['templateName'];

    });

    console.log(this.templateName,"我想拿到id得");