10.1 創(chuàng)建靜態(tài)路由

1）找到 app-routing.module.ts 配置路由
2）引入組件

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

3）配置路由

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

4）找到 app.component.html 根組件模板，配置 router-outlet 顯示動態(tài)加載的路由

<h1>
 <a routerLink="/home">首頁</a> 
<a routerLink="/news">新聞</a> 
</h1>
<router-outlet></router-outlet>

10.2 Angular routerLink 跳轉(zhuǎn)頁面 默認路 由

<a routerLink="/home">首頁</a> <a routerLink="/news">新聞</a>
//匹配不到路由的時候加載的組件 或者跳轉(zhuǎn)的路由 
{ 
path: '**', /*任意的路由*/ 
// component:HomeComponent 
redirectTo:'home' 
}

10.3 Angular routerLinkActive 設(shè) 置 routerLink 默認選中路由

<h1> 
    <a routerLink="/home" routerLinkActive="active">首頁</a> 
    <a routerLink="/news" routerLinkActive="active">新聞</a> 
</h1>
<h1> 
    <a [routerLink]="[ '/home' ]" routerLinkActive="active">首頁</a> 
    <a [routerLink]="[ '/news' ]" routerLinkActive="active">新聞</a> 
</h1>
.active{ color:red; }

10.4 靜態(tài)路由傳值

Get傳值
1、跳轉(zhuǎn)

  <a [routerLink]="[ '/newscontent']" [queryParams]="{aid:key}">{{ key }} --- {{ item }}</a>

2、接收

  import { ActivatedRoute } from '@angular/router';
  constructor(public route:ActivatedRoute) { }

  ngOnInit() {
    // console.log(this.route)
    this.route.queryParams.subscribe((data)=>{
      console.log(data)
    })
  }

10.5 動態(tài)路由

1.配置動態(tài)路由

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

2.跳轉(zhuǎn)傳值

<a [routerLink]="[ '/newscontent/',aid]">跳轉(zhuǎn)到詳情</a> 
<a routerLink="/newscontent/{{aid}}">跳轉(zhuǎn)到詳情</a>

3.獲取動態(tài)路由的值

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

10.6 動態(tài)路由的JS 跳轉(zhuǎn)

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']);//靜態(tài)
    }
}

3.路由跳轉(zhuǎn)

this.router.navigate(['/news', hero.id]); //動態(tài)

10.7 路由 get 傳值 js 跳轉(zhuǎn)

1. 引入 NavigationExtras

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

2.定義一個 goNewsContent 方法執(zhí)行跳轉(zhuǎn)，用 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); }

10.8 父子路由

1. 創(chuàng)建組件引入組件

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},
            {path:'**', redirectTo: 'newslist'}
      ]
}

3. 父組件中定義router-outlet
   想在父組件哪里用就在哪里調(diào)用

<router-outlet></router-outlet>