angular路由

在项目创立的最初期，我们应该想到任何项目都会有路由跳转。所以在创建新项目的时候我们就可以把router一并安装好，
创建新项目并安装路由命令：

 

ng new my-app --routing

这样安装的项目会自动配置好路由，无需下面的操作！！！

—————————————————————————————————————

如果在最开始直接是使用ng new my-app新建的项目，可以在后期安装router：

 

npm install @angular/router -s

那么我们需要在app文件夹下新建一个app-routing.module.ts文件:
app-routing.module.ts

 

import { NgModule } from '@angular/core';
import {Routes,RouterModule} from "@angular/router";
import {HomeComponent} from "./home/home.component"
import {code404} from "./code404/code404.component"

const routes: Routes = [
    {path:'',component:HomeComponent}//配置路由
    {path:'**',component:code404}//配置404页面
];

@NgModule({
    imports:[RouterModule.forRoot(routes)],
    exports:[RouterModule],
    providers:[]
})
export class AppRoutingModule {}

然后在app.module.ts中添加：

 

import {AppRoutingModule} from './app-routing.module'
@NgModule({
  declarations: [// 源数据，只能声明组件、指令和管道
    AppComponent , HomeComponent
  ],
  imports: [
    BrowserModule,//开发web必备模块
    AppRoutingModule
  ],
  providers: [{ 
      provide: [], 
      useValue: []
    }],//只能声明服务
  bootstrap: [AppComponent]
})
export class AppModule { }

最后在app.component.html中：

 

  <router-outlet></router-outlet>

在html模板中使用a链接进行页面跳转：

 

<a [routerLink]="['/']">首页</a>

模板中页面跳转如上，在事件中用js实现页面跳转如下：

 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {

  constructor(private router: Router) { }//这样可以拿到router对象
//事件方法
toclick(){
    this.router.navigate(["/"])
}
  ngOnInit() {
  }

}

—————————————————————————————————————

路由传参：

第一种方法：
在查询参数中传递数据

地址栏显示这样!

 

image.png

html中：

 

<a [routerLink]="['/test']" [queryParams]="{id:1}">首页</a>

test组件中获取地址栏参数：

 

 import { Component, OnInit } from '@angular/core';   
@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {
  private testId:number;//声明一个数据用来存放获取到的路由参数
  constructor(private routeInfo: ActivatedRoute) { }//这样可以获取到参数
  ngOnInit() {
    this.testId = this.routeInfo.snapshot.queryParams["id"];
  }

}

.................................................................................................

第二种方法：
在路由路径中传递参数

地址栏显示这样!

 

image.png

相比上一种方法，这种方法需要在路由配置中设置路由可以添加参数：

 

//在app-routing.module.ts中
{path:'test/:id',component:PageOneComponent},

html中：

 

<a [routerLink]="['/test',1]">首页</a>

test组件中获取地址栏参数：

 

 import { Component, OnInit } from '@angular/core';   
@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {
  private testId:number;//声明一个数据用来存放获取到的路由参数
  constructor(private routeInfo: ActivatedRoute) { }//这样可以获取到参数
  ngOnInit() {
    this.testId = this.routeInfo.snapshot.params["id"];
  }

}

特别注意：当路由是从一个路由到另外一个路由跳转传递参数时，使用

 

this.testId = this.routeInfo.snapshot.params["id"];

在同一个路由下面只改变参数就要参数订阅，则不使用上面的代码，而是使用如下代码：

 

this.routeInfo.params.subscribe((params:Params) => this.testId = params["id"];)

—————————————————————————————————————

重定向路由：

 

//在app-routing.module.ts中
const routes: Routes = [
    {path:'',redirectTo:'/home',pathMatch:'full'},//重定向路由
    {path:'home',component:HomeComponent},
];