在项目创立的最初期，我们应该想到任何项目都会有路由跳转。所以在创建新项目的时候我们就可以把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中：
在html模板中使用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中：
首页
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中：
首页
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},
];