angular 学习笔记之Angular4.x中的路由

根据不同的地址加载不同组件，实现单页面应用

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

1. 命令创建项目 注意是项目

ng new demo02 –-routing

2. 创建需要的组件

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

3. 找到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', component: NewscontentComponent},
　　{
　　path: '',/*链接为空*/
　　redirectTo: '/home',/*默认跳转的路由*/
　　pathMatch: 'full' },
  //匹配不到路由的时候加载的组件 或者跳转的路由
  { path: '**', /*任意的路由*/ 
  // component:HomeComponent 
   redirectTo:'home' }
];

4. 找到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

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

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

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

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

3. 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' } ];

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

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

注：当然前面的4步可以通过命令生成的app-routing.module.ts 直接copy到app目录下，这个已经都配置好了

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

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

6.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 routerLinkActive设置routerLink默认选中路由的class 切换改变样式

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

五、路由的动态传值

1.配置动态路由

<a routerLink="/newsconten/id" routerLinkActive="active">新闻</a> 

const routes: Routes = [ 
　　{path: 'home', component: HomeComponent}, 
　　{path: 'news', component: NewsComponent}, 
　　{path: 'newscontent/:id', component: NewscontentComponent}, /*通过/:id这种方式*/
　　{ path: '', 
　　 redirectTo: '/home', 
　　 pathMatch: 'full' }
];

2.获取动态路由的值(组件的ts文件)

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';

2. 配置路由

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

3. 父组件中定义router-outlet