angularjs2 -----路由

来源：互联网发布：sql 不允许保存更改编辑：程序博客网时间：2024/06/04 17:42

Angular 路由器是一个可选的外部 Angular NgModule，名叫RouterModule。路由器包含了多种服务(RouterModule)、多种指令(RouterOutlet、RouterLink、RouterLinkActive)、和一套配置(Routes)。

import { RouterModule }   from '@angular/router';RouterModule.forRoot([  {    path: 'heroes',    component: HeroesComponent  }])

component: 导航到此路由时，路由器需要创建的组件（HeroesComponent）。
path: 路由器会用它来匹配浏览器地址栏中的地址，如heroes。
如果我们把路径/heroes粘贴到浏览器的地址栏，路由器会匹配到'Heroes'路由，并显示HeroesComponent组件。但问题是，该把它显示在哪呢？
我们必须告诉它位置，所以我们把<router-outlet>标签添加到模板的底部。 RouterOutlet是RouterModule提供的指令之一。当我们在应用中导航时，路由器就把激活的组件显示在<router-outlet>里面。

 <a routerLink="/heroes">Heroes</a>   <router-outlet></router-outlet>

锚标签中的[routerLink]绑定。我们把RouterLink指令（ROUTER_DIRECTIVES中的另一个指令）绑定到一个字符串。它将告诉路由器，当用户点击这个链接时，应该导航到哪里。

多个模块只要在RouterModule添加path,在导航里里添加相应的锚点，代码示例：

app.module.ts

import { NgModule }       from '@angular/core';import { BrowserModule }  from '@angular/platform-browser';import { FormsModule }    from '@angular/forms';import { RouterModule }   from '@angular/router';import { AppComponent }        from './app.component';import { HeroDetailComponent } from './hero-detail.component';import { DashboardComponent }  from './dashboard.component';import { HeroesComponent }     from './heroes.component';import { HeroService }         from './hero.service';@NgModule({  imports: [    BrowserModule,    FormsModule,    RouterModule.forRoot([      {        path: '',        redirectTo: '/dashboard',        pathMatch: 'full'      },      {        path: 'dashboard',        component: DashboardComponent      },      {        path: 'detail/:id',        component: HeroDetailComponent      },      {        path: 'heroes',        component: HeroesComponent      }    ])  ],  declarations: [    AppComponent,    DashboardComponent,    HeroDetailComponent,    HeroesComponent  ],  providers: [    HeroService  ],  bootstrap: [ AppComponent ]})export class AppModule {}

这个是最基本的路由配置。

app.component.ts

<nav>    <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>    <a routerLink="/heroes" routerLinkActive="active">Heroes</a>  </nav>

0 0