角度：多个路由器插座

Question

我试图在我的应用程序中添加多个路由器插座，但没有任何运气。下面是我的代码

app.routing.module.ts

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

import {LoginComponent} from './login/login.component';
import {DashboardComponent} from './dashboard/dashboard.component';
import { AuthenticationGuardService } from './service/AuthenticationGuardService';
import { HomeComponent } from './home/home.component';
import { SearchComponent } from './search/search.component';

const routes:Routes = [
  { path: 'login', component: LoginComponent},
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'dashboard', component: DashboardComponent, outlet: 'viewport' /*, canActivate: [AuthenticationGuardService]*/ },
  { path: 'search', component: SearchComponent, outlet: 'viewport'}
];

@NgModule({
  exports: [ RouterModule ],
  imports: [RouterModule.forRoot(routes)]
})
export class AppRoutingModule {}

home.component.ts

<ul class="menu-list">
  <li (click)="navigate($event, 'dashboard')" class="data-menu-option-selected">DASHBOARD</li>
  <li (click)="navigate($event, 'search')">SEARCH</li>
  <li (click)="navigate($event, 'reports')">PDIF REPORTS</li>
  <li (click)="navigate($event, 'apps')">PENNDOT APPS</li>
</ul>
....
....
<div class="viewport-body">
  <router-outlet name="viewport"></router-outlet>
</div>
....
....

home.component.ts

private navigate(event, path):void {

    if(this.previousSelection != null) {
      this.previousSelection.removeAttribute('class');
    }
    event.target.setAttribute('class', 'data-menu-option-selected');
    this.previousSelection = event.target;

    // this.router.navigate([{outlets: {primary: 'home', viewport: path}}]);

    this.router.navigate([{ outlets: { viewport: [ path ] }}]);
    // this.router.navigateByUrl('/home(viewport:dashboard)');
  }

我使用的是Angular 5.2.11，路由模块版本为5.2.11。

当我单击列表项时，URL从http://localhost:4200/home更改为http://localhost:4200/home(viewport:dashboard)，但在命名的路由器出口中什么也没有显示。

我在控制台中也看不到任何错误。

谁能告诉我我想念什么？

编辑： 我正在尝试开发如下屏幕。当用户单击左侧的任何列表项时，相应的项应在右侧部分中打开。