Angular2学习之懒加载(Lazy)路由(router)问题


路由是Angular2中经常用到的.而且在Angular2中添加了懒加载(lazy).


问题描述:


上面为文件目录.具体是在hero-routing.module.ts将上面三个文件夹中各组件绑定.
绑定代码:
import {RouterModule} from "@angular/router";
import {NgModule} from "@angular/core";
import {DashboardComponent} from "./dashboard/dashboard.component";
import {HeroesComponent} from "./heroes/heroes.component";
import {HeroDetailComponent} from "./hero-detail/hero-detail.component";
import {HeroSearchComponent} from "./hero-search/hero-search.component";
@NgModule({
    imports: [RouterModule.forChild([
        { path: '',
            component: HeroSearchComponent,
            children: [
                { path: 'dashboard',    component: DashboardComponent },
                { path: 'heroes',     component: HeroesComponent },
                { path: 'detail/:id', component: HeroDetailComponent },
            ]
        }
    ])],
    exports: [RouterModule]
})
export class HeroRoutingModule {}


界面:

点击以上item跳转到detail详情中。

在此问题出现了



找不到路由。

解决方法:

1、修改跳转事件

constructor(
      private router: Router,
      private route: ActivatedRoute,
      private heroService: HeroService) { }
添加ActivateRoute导入


this.router.navigate(['../detail', this.selectedHero.id],{relativeTo: this.route});
其中relativeTo是相对路径,因为hero-routing.module.ts文件没和“跳转路由”在相同文件夹下,所以使用相对路径来寻找。若不添加
{relativeTo: this.route}
则在根目录中的路由中寻找

2、界面路径修改

<a class="button" routerLink="{{'../detail/'+selectedHero.id}}" routerLinkActive="active">查看详请</a>

到此问题解决




         


评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值