[Angular 2] Child Router

最新推荐文章于 2025-09-13 09:06:35 发布

转载最新推荐文章于 2025-09-13 09:06:35 发布 · 71 阅读

文章标签：

#javascript #ViewUI

本文详细介绍了如何在Angular2中通过Child Router实现组件的按需加载，包括定义子路由、配置路由规则及在组件中使用路由链接等关键步骤，旨在提升应用的性能和用户体验。

Benefit to use child router is Angualr 2 then can lazy load the component on demand.

Define a child router by adding three dots `/characters/...`:

@RouteConfig([
  { path: '/characters/...', name: 'Characters', component: CharactersComponent, useAsDefault: true },
  { path: '/vehicles/...', name: 'Vehicles', component: VehiclesComponent }
])

So both `characters` and `vehicles` component container child router.

Then in each component, we define its child rotuer

import { Component } from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router';

import { CharacterComponent } from './character.component';
import { CharacterListComponent } from './character-list.component';
import { CharacterService } from './character.service';

@Component({
  selector: 'story-characters-root',
  template: `
    <router-outlet></router-outlet>
  `,
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  { path: '/', name: 'Characters', component: CharacterListComponent, useAsDefault: true },
    { path: '/:id', name: 'Character', component: CharacterComponent }
])
export class CharactersComponent { }

import { Component, OnInit } from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router';

import { VehicleListComponent } from './vehicle-list.component';
import { VehicleComponent } from './vehicle.component';
import { VehicleService } from './vehicle.service';

@Component({
  selector: 'story-vehicles-root',
  template: `
    <router-outlet></router-outlet>
  `,
  directives: [ROUTER_DIRECTIVES],
  providers: [VehicleService]
})
@RouteConfig([
  { path: '/', name: 'Vehicles', component: VehicleListComponent, useAsDefault: true },
    { path: '/:id', name: 'Vehicle', component: VehicleComponent }
])
export class VehiclesComponent { }

----------------

The list component, set routerLink:

<ul class="characters">
    <li *ngFor="#character of characters | async">
      <a href="" [routerLink]="['Character', {id: character.id}]">
       {{character.id}}. {{character.name}}
      </a>
    </li>
  </ul>