zoukankan      html  css  js  c++  java
  • [Angular 2] 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>
  • 相关阅读:
    【分治法】线性时间选择(转)
    【分治法】最接近点对问题(转)
    概率DP入门总结 16题(转)
    动态规划初探及什么是无后效性? (转)
    第15章DP(转)
    整数快速乘法/快速幂+矩阵快速幂+Strassen算法 (转)
    矩阵乘法的理解(转)
    算法导论第4章习题与思考题(转)
    Transaction Script模式
    注册服务
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5406643.html
Copyright © 2011-2022 走看看