子路由不好用，请老师帮忙！

来源：3-5 子路由

Allen_Liu_1106

2017-12-05

第一次练习按照老师的课走，做出来的项目没有问题；

第二次自己向重新练一次，做到子路由出现问题，没找到原因，详细见下面帖子

写回答

2回答

Allen_Liu_1106

提问者

2017-12-05

代码主要的如下：

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {HomeComponent} from './home/home.component';
import {StockComponent} from './stock/stock.component';
import {BuyerListComponent} from './buyer-list/buyer-list.component';
import {SellerListComponent} from './seller-list/seller-list.component';

const routes: Routes = [
{path: '', redirectTo: '/home', pathMatch: 'full'},
{path: 'home', component: HomeComponent},
{path: 'stock/:id', component: StockComponent, data: [{isPro: true}], children: [
{path: '', component: BuyerListComponent},
{path: 'seller/:id', component: SellerListComponent}
]
}
];

stock.component.ts:

export class StockComponent implements OnInit {
private stockId: number;
private isPro: boolean;

constructor(private routerInfo: ActivatedRoute) {
}

ngOnInit() {
this.routerInfo.params.subscribe((params: Params) => this.stockId = params['id']);
this.isPro = this.routerInfo.snapshot.data[0]['isPro'];

}

}

app.component.html:

stock.component.html:

<div class="stock">
<p>
这里是股票销售页面
{{stockId}}

isPro:{{isPro}}

</p>
<p>
</p>
<a [routerLink]="['./']">买家列表</a>
<a [routerLink]="['./seller',100]">卖家列表</a>
<router-outlet></router-outlet>
</div>

>>>>>>>问题的错误描述: 点sellerlist的链接时候报错误（如图），但是错误看不懂，默认的空路径(' ')的路由能正常显示buyer-list,只有selllist导航不过去 //img.mukewang.com/szimg/5a2605dc0001507f18300665.jpg