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>
  • 相关阅读:
    Python Django :HTTP生命周期
    Docker简介及Centos 7 安装[初步配置]
    python:Django 简介。
    python :Django url /views /Template 文件介绍
    python:异常处理及程序调试
    python之正则表达式【re】
    Day 21 python :面向对象 类的相关内置函数 /单例模式 /描述符
    Day 22: 软件开发目录设计规范
    Day 20: 面向对象【多态,封装,反射】字符串模块导入/内置attr /包装 /授权
    SpringCloud教程 | 第九篇: 服务链路追踪(Spring Cloud Sleuth)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5406643.html
Copyright © 2011-2022 走看看