7、angular的路由

目录
一、Angular命令创建一个配置好路由的项目
二、Angula4.x在已有的项目中配置路由
三、Angular routerLink页面跳转 默认跳转路由
四、Angular routerLinkActive设置routerLink默认选中路由
五、路由的动态传值
六、路由的js跳转
七、路由的js跳转 get传值
八、父子路由

一、Angular命令创建一个配置好路由的项目

1. 命令创建项目

   ng new demo02 –-routing

2. 创建需要的组件

ng g component home 
ng g component news 
ng g component newscontent

1. 找到app-routing.module.ts 配置路由

引入组件

import { HomeComponent } from './home/home.component'; 
import { NewsComponent } from './news/news.component'; 
import { NewscontentComponent } from './newscontent/newscontent.component';

配置路由

const routes: Routes = [ 
    {path: 'home', component: HomeComponent}, 
    {path: 'news', component: NewsComponent}, 
    {path: 'newscontent/:id', component: NewscontentComponent}, 
    { path: '', redirectTo: '/home',pathMatch: 'full' } 
    ];

1. 找到app.component.html根组件模板，配置router-outlet显示动态加载的路由

<h1> 
    <a routerLink="/home">首页</a> 
    <a routerLink="/news">新闻</a> 
</h1> 
<router-outlet></router-outlet>

二、Angula4.x在已有的项目中配置路由

1. 新建组件

ng g component home 
ng g component news 
ng g component newscontent

1. 新建app-routing.module.ts ,app-routing.module.ts中引入模块

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

1. app-routing.module.ts中引入组件

import { HomeComponent } from './home/home.component'; 
import { NewsComponent } from './news/news.component'; 
import { NewscontentComponent } from './newscontent/newscontent.component';

1. app-routing.module.ts中配置组件

const routes: Routes = [ 
    {path: 'home', component: HomeComponent}, 
    {path: 'news', component: NewsComponent}, 
    {path: 'newscontent/:id', component: NewscontentComponent}, 
    { path: '', redirectTo: '/home', pathMatch: 'full' } 
    ];

1. app-routing.module.ts中配置模块 暴露模块

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

1. 在app.module.ts 引入刚才定义的路由

import { AppRoutingModule } from './app-routing.module';

6.app.module.ts里面的import注册这个路由模块

imports: [ BrowserModule, AppRoutingModule ]

7.找到app.component.html根组件模板，配置router-outlet显示动态加载的路由

<h1> <a routerLink="/home">首页</a> <a routerLink="/news">新闻</a> </h1> 
<router-outlet></router-outlet>

三、Angular routerLink页面跳转 默认跳转路由

<a routerLink="/home">首页</a> <a routerLink="/news">新闻</a> //刚进来路由为空跳转的路由 { path:'', redirectTo:'

//刚进来路由为空跳转的路由 
{ path:'', redirectTo:'home', pathMatch:"full" } //匹配不到路由的时候加载的组件 或者跳转的路由 
{ path: '**', /*任意的路由*/ // component:HomeComponent 
 redirectTo:'home' 
}

四、Angular routerLinkActive设置routerLink默认选中路由

<h1> <a routerLink="/home" routerLinkActive="active">首页</a> <a routerLink="/news" routerLinkActive="active">新闻</a> </h1> .active{ color:red; }

五、路由的动态传值

1.配置动态路由

const routes: Routes = [ 
    {path: 'home', component: HomeComponent}, 
    {path: 'news', component: NewsComponent}, 
    {path: 'newscontent/:id', component: NewscontentComponent}, 
    { path: '', redirectTo: '/home', pathMatch: 'full' } 
    ];

2.获取动态路由的值

import { Router, ActivatedRoute, Params } from '@angular/router';
constructor( private route: ActivatedRoute) {
}
ngOnInit() {
    console.log(this.route.params);//
    this.route.params.subscribe(data=>this.id=data.id); 
}

六、路由的js跳转

1. 引入

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

2.初始化

export class HomeComponent implements OnInit {
    constructor(private router: Router) { }
    ngOnInit() { }
    goNews(){
        this.router.navigate(['/news', hero.id]);
        this.router.navigate(['/news']);
    }
}

3.路由跳转

this.router.navigate(['/news', hero.id]);

七、路由的js跳转 get传值

1. 引入NavigationExtras

import { Router ,NavigationExtras,ActivatedRoute} from '@angular/router';

2.定义一个goNewsContent方法执行跳转，用NavigationExtras配置传参。

goNewsContent(){ 
    let navigationExtras: NavigationExtras = { 
        queryParams: { 'session_id': '123' }, 
        fragment: 'anchor' }; 
    this.router.navigate(['/news'],navigationExtras); 
}

3.获取get传值

constructor(private route: ActivatedRoute) { console.log(this.route.queryParams); }

八、父子路由

1. 创建组件引入组件

import { NewsaddComponent } from './components/newsadd/newsadd.component'; 
import { NewslistComponent } from './components/newslist/newslist.component';

1. 配置路由

{ path: 'news', component:NewsComponent,
 children: [
     { path:'newslist', component:NewslistComponent },
     { path:'newsadd', component:NewsaddComponent }
 ]
}

1. 父组件中定义router-outlet

<router-outlet></router-outlet>