时间戳

首页 > 解决方案 > 如何使用路由器插座不附加内容而是替换

angular - 如何使用路由器插座不附加内容而是替换

问题描述

我有一个角度站点，我使用了 html/css 主题并将该主题应用于应用程序组件。

我的应用程序组件如下所示（我有嵌套组件，我有很多组件，但我在这里只放了几个）

<app-header></app-header>
<app-body-part></app-body-part>
<app-footer></app-footer>
<router-outlet></router-outlet>

现在我需要添加一个会员区。

我已将路由器配置如下

  {path: 'member-area',component:MemberAreaComponent}

但为此，我不想为该成员区域设置上述 html/css 主题。在上面的示例中，成员区域组件将位于该部分的下方。

我需要更换以上 3 个组件，而不是附加

方法是什么？我是否需要删除应用程序组件内容并使用单独的组件来包含当前存在的组件？

标签： angularangular-ui-router

解决方案

我自己找到了解决方案。我创建了一个新组件“main”并复制了我在应用程序组件中的所有内容。

然后我删除了应用程序组件中的所有内容并仅使用了

并创建了一个新的路由器路径，如下所示

const routes: Routes = [
  {path: 'member-area',component:MemberAreaComponent},
  {path: '',component:MainComponent}
];

推荐阅读