- codingsoho.com

Angularv4.初体验

7 模块路由映射 Mapping URLS with RouterModules

07 Mapping URLS with RouterModules

本节会实现URL的路由添加，这样我们能根据URL直接到相应的视图 (列表或者详情等等 )

新建文件 app.routing.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { VideoListComponent } from './video-list/video-list.component';
import { VideoDetailComponent } from './video-detail/video-detail.component';

const appRoutes: Routes = [
  {
    path:"videos",
    component:VideoListComponent,
  },
  {
    path:"videos/:slug",
    component:VideoDetailComponent
  },
]

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes
    )
  ],
  exports:[
    RouterModule
  ]
})

export class AppRoutingModule{}

我们也可以把代码放到app.modules.ts，但是这样代码不够整洁

直接在app.modules.ts导入

import { AppRoutingModule} from './app.routing';

@NgModule({
  declarations: [
    AppComponent,
    VideoListComponent,
    VideoDetailComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})

接下来访问 http://127.0.0.1:4200/videos 或者 http://127.0.0.1:4200/videos/item-1 即可

但是内容会有重复，原因是app.component.html里除了router还添加了其他的selector，如果它不在router-outlet里面一样会显示，所以注释它们即可

<!-- <video-list></video-list> -->
<!-- <video-detail></video-detail> -->
<router-outlet></router-outlet>

这里 <app-root> 相当于是局部页面的占位符。这个区域是动态加载的，运行时，会被 app.component.html 替换掉。具体来说，就是被以下页面替换掉。

可以简单把它理解为：页面的占位符，动态加载，会被替换掉的。
当点击 home、about、 dashboard 时，在导航栏的下方，会被对应的 xxx.component.html 替换掉。这就是单页面路由的原理。