命令創(chuàng)建項(xiàng)目

1. 命令創(chuàng)建項(xiàng)目

ng new angualrdemo08 --skip-install

圖片.png

2. 創(chuàng)建需要的組件

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/:id', component: NewscontentComponent}, 
{ path: '', redirectTo: '/home', pathMatch: 'full' }
 ];

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

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

Angular routerLink 跳轉(zhuǎn)頁(yè)面 默認(rèn)路由

//匹配不到路由的時(shí)候加載的組件 或者跳轉(zhuǎn)的路由 
{ path: '**', /*任意的路由*/ // 
component:HomeComponent,
redirectTo:'home' 
}

設(shè)置選中樣式

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

動(dòng)態(tài)路由

配置動(dòng)態(tài)路由

const routes: Routes = [ 
{path: 'home', component: HomeComponent}, 
{path: 'news', component: NewsComponent}, 
{path: 'newscontent/:id', component: NewscontentComponent}, 
{ path: '', redirectTo: '/home', pathMatch: 'full' } 
];
//跳轉(zhuǎn)傳值
<a [routerLink]="[ '/newscontent/',aid]">跳轉(zhuǎn)到詳情</a> 
<a routerLink="/newscontent/{{aid}}">跳轉(zhuǎn)到詳情</a>

獲取動(dòng)態(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); 
}

動(dòng)態(tài)路由的 js 跳轉(zhuǎn)

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

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

1. 引入 NavigationExtras

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

2.定義一個(gè) goNewsContent 方法執(zhí)行跳轉(zhuǎn)，用 NavigationExtras 配置傳參。

goNewsContent(){ 
let navigationExtras: NavigationExtras = { 
queryParams: { 'session_id': '123' }, 
fragment: 'anchor' 
};
this.router.navigate(['/news'],navigationExtras); }
//獲取 get 傳值
constructor(private route: ActivatedRoute) { console.log(this.route.queryParams); 
}

父子路由

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