angular 路由基础

1.首先根节点 app-routing.module.ts

const routes = [{
  path: 'home',
  component: HomeContainerComponent
}]

@NgModule({
  /**
   * 根路由使用 `RouterModule.forRoot(routes)` 形式。
   * 而功能模块中的路由模块使用 `outerModule.forChild(routes)` 形式。
   * 启用路由的 debug 跟踪模式，需要在根模块中设置 `enableTracing: true`
   */
  imports: [RouterModule.forRoot(routes, { enableTracing: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

注意星号部分的提示。根节点使用routerModule.forRoot

2.app.component.html 增加占位标签<router-outlet></router-outlet>

<!--
  路由显示的内容是插入到 router-outlet 的同级的下方节点
  而不是在 router-outlet 中包含
-->
<router-outlet></router-outlet>

3.配置appMoule 这里要包含 homeMoule 这里包含着路由中需要的HomeContainerComponentzu'ji

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FormsModule,
    SharedModule,
    AppRoutingModule,
    // 注意如果不是懒加载，一定要在根模块中导入功能模块
    // 才能使子路由导入进来，路由也才可以成功
    HomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

4.配置HomeModule

@NgModule({
  declarations: [HomeContainerComponent],
  imports: [SharedModule]
})
export class HomeModule { }

5.自定义 HomeContainerComponent 这里就会将想要的内容放到2的<router-outlet></router-outlet>占位标签中。

结果如下，可以查看代码结构