angularjs2-----路由

最新推荐文章于 2021-06-15 14:14:09 发布

LUCKY - W · J

最新推荐文章于 2021-06-15 14:14:09 发布

阅读量428

点赞数

CC 4.0 BY-SA版权

分类专栏： angularJs

本文链接：https://blog.youkuaiyun.com/qq_33152517/article/details/62427997

angularJs 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了Angular中的路由功能，包括RouterModule的使用方法、RouterLink指令的作用、以及如何通过配置Routes属性实现页面间的导航。同时，还提供了多模块路由的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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 { HeroesComponent }     from './heroes.component';
import { HeroService }         from './hero.service';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      {
        path: 'heroes',
        component: HeroesComponent
      }
    ])
  ],
  declarations: [
    AppComponent,
    HeroDetailComponent,
    HeroesComponent
  ],
  providers: [
    HeroService
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

path: 路由器会用它来匹配浏览器地址栏中的地址，如heroes。
component: 导航到此路由时，路由器需要创建的组件（HeroesComponent）。

如果我们把路径/heroes粘贴到浏览器的地址栏，路由器会匹配到'Heroes'路由，并显示HeroesComponent组件。但问题是，该把它显示在哪呢？

把原有的app.component改造一下：

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

锚标签中的[routerLink]绑定。我们把RouterLink指令（ROUTER_DIRECTIVES中的另一个指令）绑定到一个字符串。它将告诉路由器，当用户点击这个链接时，应该导航到哪里。多个模块路由才有意义，其它的模块在RouterModule继续添加即可。多个模块的示例代码：

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

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