angularjs2 学习笔记 路由

Posted 2020-07-13 oldkingsir

angular2路由是管理angular2应用内部导航的一个重要内容，在angular应用中，很多的组件是通过组合完成一个复杂的应用，不可避免的是我们常会在视图间切换，那么这是就需要使用路由来管理视图间的转换。

路由定义

先看一个简单的路由定义

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>

import {Component} from ‘angular2/core‘;

import {RouteConfig, ROUTER_DIRECTIVES} from ‘angular2/router‘;

import {parentCmp} from "./parent.component";

import {planetList} from "./planet-list.component";

 

 

 

@Component({

    selector: ‘my-app‘,

    template: `

    <h3 class="title">Angular 2 Router Example</h3>

    <nav>

      <a [routerLink]="[‘Parent‘]">parent</a>

      <a [routerLink]="[‘PlanetList‘]">planetList</a>

      

    </nav>

    <router-outlet></router-outlet>

  `,

    

    directives: [ROUTER_DIRECTIVES]

})

@RouteConfig([

 

    {

        path: ‘/contact‘,

        name: ‘Parent‘,

        component: parentCmp,

        useAsDefault: true

    },

 

    {

        path: ‘/planetList‘,

        name: ‘PlanetList‘,

        component: planetList

    }

])

export class RouteExampleAppComponent { }

 

 

从这个例子可以看出路由定义的过程

1、  引入路由组件import {RouteConfig, ROUTER_DIRECTIVES} from ‘angular2/router‘

2、  引入我们所需的导航组件

import {parentCmp} from "./parent.component";

import {planetList} from "./planet-list.component";

3、  定义组件，配置模板，定义路由

<a [routerLink]="[‘Parent‘]">parent</a>定义了一个路由，其中的Parent是我们的一个的一个路由标签，来自下面的路由配置，注意使用驼峰的表达方式。

<router-outlet></router-outlet>定义了视图的显示位置，即导航的模块显示区域

directives: [ROUTER_DIRECTIVES]，引入路由指令

@RouteConfig：用于进行路由配置，其中path只路由的路径，在url中能够看到；name指路由的名称，和上面导航一致；component路由的组件即路由指向的组件。

 

这样一个简单的路由组件就基本完成

路由使用

import {bootstrap} from ‘angular2/platform/browser‘;

import {ROUTER_PROVIDERS} from ‘angular2/router‘;

import {RouteExampleAppComponent} from "./myRoute";

 

 

bootstrap(RouteExampleAppComponent, [ROUTER_PROVIDERS]); 

这里和前面的bootstrap组件调用不同的是除了引入自定义的组件外还需要注入angular的路由服务。