如何在不替换Angular 5中的先前组件的情况下一个接一个地加载组件

Question

我是angular 5的新手，我想在单个div标签内路由多个组件，下面是我的代码：

    const routes: Routes = [
  {
    path:'course',
    component: POC1Component
  },
  {
    path: 'playlist',
    component: POC2Component
  }  
];

在上面的代码中，我有两个不同的组件

    <div>
  <router-outlet></router-outlet>
</div>

这是我的路由器出口代码，每当我单击以下链接标签时 它正在替换组件。

<a routerLink="course"></a>
<a routerLink="playlist"></a>

我只是不想用下一个click组件替换现有组件。 我想在下一个组件之后附加下一个单击的组件。

Answer 1

您可以有条件地将多个路由器插座与命名插座一起使用：- //首页/首页

<router-outlet></router-outlet>

///点击添加一些ngIF条件

router-outlet name="popup"></router-outlet> 

定义路由器，例如：

{
  path: 'abc',
  component: abcComponent,
  outlet: 'popup'
}