如何使用路由器出口而不是添加内容而是替换

Question

我有一个有角度的网站，我使用了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个组件，而不是追加

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

Answer 1

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

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

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

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