angularjs简单的路由跳转

<>创建路由：

首先创建一个带路由的项目
创建需要的组件
在根模块里引入组件（用命令创建的组件会自动引入到根模块）

<>配置路由:
import {HomeComponent } from './components/home/home.component'; //在路由模块里引入组件
{path: 'home',component:HomeComponent}, //并在routes里配置动态加载路
这个路由是放在<router-outlet></router-outlet>里显示的
此时可以在地址栏输入地址可现实对应的页面 表示路由配置成功

<>配置router-outlet显示动态加载路由
页面会刷新 <a href= '/news'>新闻</a> 页面不刷新 <a [routerLink]="[ '/news' ]"></a> 路由默认选中
<a [routerLink]="[ '/news' ]" routerLinkActive="active">新闻</a>
匹配不到路由时加载的组件 或者跳转的路由
{path: '**',redirectTo: 'home'}
<>路由跳转传值

<>get传值:

<>1、跳转
<li *ngFor="let item of list;let key=index"> <a
[routerLink]="['/newscomponent']" [queryParams]="{aid:key}"> {{key}}----{
{item}} </a> </li>
<>2、接收

引入（在需要跳转的.component.ts页面引入）
import { ActivatedRoute } from '@angular/router';
声明
constructor(public route:ActivatedRoute) { }
获取get传值
ngOnInit() { //console.log(this.route.queryParams);
this.route.queryParams.subscribe((data)=>{ console.log(data.aid); }) }
动态路由
1、配置动态路由
需要在路由里配置（在path路径后添加/:aid）
2、跳转
<li *ngFor="let item of list;let key=index"> <a
[routerLink]="['/newscomponent',key]"> {{key}}----{{item}} </a> </li>
3、接收
引入
import { ActivatedRoute } from '@angular/router'; 声明 constructor(public
route:ActivatedRoute) { } 获取 ngOnInit() {
this.route.params.subscribe((data)=>{ console.log(data); }) }
动态路由的js跳转
1、在需要跳转的HTML页面设置一个click事件
<button (click)='goViewContent()'>js路由跳转</button>
2、引入（在需要跳转的.component.ts页面引入）
import { Router } from '@angular/router';
3、声明
constructor(public router:Router) { } 4、设置事件函数 goViewContent(){
this.router.navigate(['/viewcontent','123456']) }
//（123456是静态传值，需要在配置路由时path路径后添加/:pid）
<>get传值的js跳转

1、引入NavigationExtras
import {Router,NavigationExtras} from '@angular/router';
2、声明
constructor(public router:Router) { }
3、定义一个方法执行跳转，用NavigationExtras配置传参
goNews(){ let queryParams:NavigationExtras={ queryParams:{'aid':12} }
this.router.navigate(['/news'],queryParams); }
//注意：也可以不引入NavigationExtras，但是不是标准写法

• « 上一篇：OSPF实验
• » 下一篇：网络安全简历如何写？