一、版本问题
如果你按照官网的教程来走，或者直接下载官网教程案例，那么有可能你的教程程序会报错。原因就在于Angular CLI默认安装的版本是5.3.0的版本，而教程的版本是6.0.0的版本。比如‘rxjs’：
解决：
import { Observable, of } from 'rxjs';
改成：
import {Observable }from 'rxjs/Observable';
import {of }from 'rxjs/observable/of';
凡是有import引入报错的地方都按照你当前版本的语法引入。
或者在官网(angular.cn)学习时选择相应的版本：
版本选择
二、子路由不显示active效果
如果你想让初始页面有routerLinkActive = "active"效果，就要加上 [routerLinkActiveOptions]="{exact: true}"
如果你想让子路由的页面有routerLinkActive = "active"效果，就不要加上 [routerLinkActiveOptions]="{exact: true}"
因为它表示的是完全匹配路由时才有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失效，无法跳转到相应的组件
const appRoutes: Routes = [
{path: 'design', conponent: PartComponent, children: [
{path: 'ss', component: SsartComponent },
{path: ':designer', component: PartshowComponent},
] }，
{path: '', component: HeaderComponent, pathMatch: 'full' },
];
解决：不要在父路由里面写父路由的模块，而应该把它写在子路里，如下所示
const appRoutes: Routes = [
{path: 'design', children: [
{path: '', component: PartComponent },
{path: 'ss', component: SsartComponent },
{path: ':designer', component: PartshowComponent},
] }，
{path: '', component: HeaderComponent, pathMatch: 'full' },
];
四、路由跳转&&子页面刷新数据消失
非父子组件直接的跳转，如一排信息列表，用户点击其中一条之后跳转到新的信息描述页面。
解决：
用户点击后立即执行router.navigate方法跳转到相应的子路由，在开始的组件.ts中
export class BlogComponent implements OnInit {
//自己定义的点击跳转方法
getBlogContent(id, title) {
this.router.navigate([id], {relativeTo: this.routInfo, queryParams: {title: title}});
}
constructor( private router: Router, private routInfo: ActivatedRoute) { }
ngOnInit() {
}
在app.module.ts中子路由定义好对应的组件
const appRoutes: Routes = [
{path: 'design', children: [
{path: '', component: PartComponent },
{path: 'ss', component: SsartComponent },
{path: ':designer', component: PartshowComponent},
] }，
];
在子组件的初始函数ngOnlnit中通过ActivatedRoute获取要跳转页面的查询信息,在目标组件.ts中
export class PartshowComponent implements OnInit {
constructor(private activeRoute: ActivatedRoute, private messageService: MessageServiceService) { }
ngOnInit() {
this.getDesigeMsg();
}
getDesigeMsg(): void {
//通过ActiveRoute获取传递过来的查询信息
const num = this.activeRoute.snapshot.params['designer'];
//异步获取信息
this.messageService.getPartShow(num).subscribe(data => {
//获取查询信息的内容data
}
}
}
getPartShow（）是自定义的MessageService服务里的http方法，在service服务组件中
getPartShow(num) {
const url = this.partShowUrl + num+ '.json';
return this.http.get(url);
}
由于子页面每次加载时都会根据当前的路由信息获得查询信息num，再根据num查询页面要显示的内容，所以子页面刷新也不会出现没有数据的情况。
*不要在用户点击后马上获取页面要显示的信息，再通过service服务保存这些信息，然后在通过路由跳转navigate跳转到相应的页面，再在页面通过seivice服务获取保存的该页面的信息。虽然能够实现不同组件间的数据传递，但是F5刷新之后数据就没了，因为你的数据都是通过点击之后才查询产生的。
所以，子页面数据加载要在初始时去查询，当然你也可以加相应的cookie避免每次刷新都要发送请求。
网友评论