一、版本問(wèn)題
如果你按照官網(wǎng)的教程來(lái)走，或者直接下載官網(wǎng)教程案例，那么有可能你的教程程序會(huì)報(bào)錯(cuò)。原因就在于Angular CLI默認(rèn)安裝的版本是5.3.0的版本，而教程的版本是6.0.0的版本。比如‘rxjs’：
解決：
import { Observable, of } from 'rxjs';
改成：
import {Observable }from 'rxjs/Observable';
import {of }from 'rxjs/observable/of';
凡是有import引入報(bào)錯(cuò)的地方都按照你當(dāng)前版本的語(yǔ)法引入。
或者在官網(wǎng)(angular.cn)學(xué)習(xí)時(shí)選擇相應(yīng)的版本：
二、子路由不顯示active效果
如果你想讓初始頁(yè)面有routerLinkActive = "active"效果，就要加上?[routerLinkActiveOptions]="{exact: true}"
如果你想讓子路由的頁(yè)面有routerLinkActive = "active"效果，就不要加上?[routerLinkActiveOptions]="{exact: true}"
因?yàn)樗硎镜氖峭耆ヅ渎酚蓵r(shí)才有active效果，所以子路由不要加。
解決：
<a routerLink = "/blog" routerLinkActive="active">HOME</a>
<a routerLink ="/design" routerLinkActive="active">DESIGN</a>
<a routerLink = "" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">BLOG</a>
三、子路由children失效，無(wú)法跳轉(zhuǎn)到相應(yīng)的組件
const appRoutes: Routes = [
{path: 'design', conponent: PartComponent, children: [
????{path: 'ss', component: SsartComponent },
? ? {path: ':designer', component: PartshowComponent},
? ] }，
? {path: '', component: HeaderComponent, pathMatch: 'full' },
];
解決：不要在父路由里面寫(xiě)父路由的模塊，而應(yīng)該把它寫(xiě)在子路里，如下所示
const appRoutes: Routes = [
{path: 'design', children: [
????{path: '', component: PartComponent },
???{path: 'ss', component: SsartComponent },
? ? {path: ':designer', component: PartshowComponent},
? ] }，
? {path: '', component: HeaderComponent, pathMatch: 'full' },
];
四、路由跳轉(zhuǎn)&&子頁(yè)面刷新數(shù)據(jù)消失
非父子組件直接的跳轉(zhuǎn)，如一排信息列表，用戶(hù)點(diǎn)擊其中一條之后跳轉(zhuǎn)到新的信息描述頁(yè)面。
解決：
用戶(hù)點(diǎn)擊后立即執(zhí)行router.navigate方法跳轉(zhuǎn)到相應(yīng)的子路由，在開(kāi)始的組件.ts中
export class BlogComponent implements OnInit {
//自己定義的點(diǎn)擊跳轉(zhuǎn)方法
? getBlogContent(id, title) {
this.router.navigate([id], {relativeTo: this.routInfo, queryParams: {title: title}});
? }
constructor( private router: Router, private routInfo: ActivatedRoute) { }
ngOnInit() {
}
在app.module.ts中子路由定義好對(duì)應(yīng)的組件
const appRoutes: Routes = [
{path: 'design', children: [
????{path: '', component: PartComponent },
???{path: 'ss', component: SsartComponent },
? ? {path: ':designer', component: PartshowComponent},
? ] }，
];
在子組件的初始函數(shù)ngOnlnit中通過(guò)ActivatedRoute獲取要跳轉(zhuǎn)頁(yè)面的查詢(xún)信息,在目標(biāo)組件.ts中
export class PartshowComponent implements OnInit {
? constructor(private activeRoute: ActivatedRoute, private messageService: MessageServiceService) { }
ngOnInit() {
this.getDesigeMsg();
? }
getDesigeMsg(): void {
????//通過(guò)ActiveRoute獲取傳遞過(guò)來(lái)的查詢(xún)信息
????const num = this.activeRoute.snapshot.params['designer'];
? ? //異步獲取信息
????this.messageService.getPartShow(num).subscribe(data => {
????//獲取查詢(xún)信息的內(nèi)容data
}
? }
}
getPartShow（）是自定義的MessageService服務(wù)里的http方法，在service服務(wù)組件中
getPartShow(num) {
const url = this.partShowUrl + num+ '.json';
? return this.http.get(url);
}
由于子頁(yè)面每次加載時(shí)都會(huì)根據(jù)當(dāng)前的路由信息獲得查詢(xún)信息num，再根據(jù)num查詢(xún)頁(yè)面要顯示的內(nèi)容，所以子頁(yè)面刷新也不會(huì)出現(xiàn)沒(méi)有數(shù)據(jù)的情況。
*不要在用戶(hù)點(diǎn)擊后馬上獲取頁(yè)面要顯示的信息，再通過(guò)service服務(wù)保存這些信息，然后在通過(guò)路由跳轉(zhuǎn)navigate跳轉(zhuǎn)到相應(yīng)的頁(yè)面，再在頁(yè)面通過(guò)seivice服務(wù)獲取保存的該頁(yè)面的信息。雖然能夠?qū)崿F(xiàn)不同組件間的數(shù)據(jù)傳遞，但是F5刷新之后數(shù)據(jù)就沒(méi)了，因?yàn)槟愕臄?shù)據(jù)都是通過(guò)點(diǎn)擊之后才查詢(xún)產(chǎn)生的。
所以，子頁(yè)面數(shù)據(jù)加載要在初始時(shí)去查詢(xún)，當(dāng)然你也可以加相應(yīng)的cookie避免每次刷新都要發(fā)送請(qǐng)求。
