angular中router-outlet插槽的使用 （路由配置）

一、页面结构

二、首页内容

三、路由配置

module.ts中

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {RouterModule, Routes} from '@angular/router';
import {VirtualOrgComponent} from './virtual-org.component';
import {NgZorroAntdModule, NzDropDownModule} from 'ng-zorro-antd';
import {VirtualAddComponent} from './virtual-add/virtual-add.component';
import {VirtualSelectroleComponent} from './virtual-selectrole/virtual-selectrole.component';
import {VirtualPagesComponent} from './virtual-pages/virtual-pages.component';
import {VirtualAdminComponent} from './virtual-admin/virtual-admin.component';

const routes: Routes = [
  {
    path: '',
    component: VirtualOrgComponent,
    children: [
      {
        path: '',
        component: VirtualPagesComponent
      },
      {
        path: 'add',
        component: VirtualAddComponent
      },
      {
        path: 'roles',
        component: VirtualSelectroleComponent
      },
      {
        path: 'admin',
        component: VirtualAdminComponent
      }
    ]
  }
];

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    NgZorroAntdModule,
  ]
})
export class VirtualOrgModule {
}

routerlet必须要配合 RouterModule.forChild(routes),使用；

路由跳转：在父级路由的基础上添加当前配置的组件路由