Angular 如何正确显示嵌套视图？

因此，我们目前正在进行一个项目，该项目有许多必须显示的嵌套管线。原因是有两个单独的组件同时显示，当单击时将关闭。我的问题是如何正确地获得嵌套视图以动态显示

为了让您了解我们的层次结构，我们有： 看法 | 家 | 卡片-这里是我们希望显示各种卡片的地方，我已经得到了所有要显示的内容

以下是文件的当前代码，其中包含我们试图显示的代码：

HTML-----------------

---

我感谢任何帮助或提示，请让我知道，如果你希望我在任何事情上展开，谢谢你的时间

你能解释一下“原因是两个单独的组件同时显示，当点击时，它们将被关闭。”我是说，嗨！很抱歉回复太晚，但这是肯定的！因此，我希望实现的是，当应用程序加载两个组件时，将显示两个不同的组件，它们是父组件的嵌套子组件。这两个组件将服务于两个单独的功能。一个用作视图，另一个用作按钮列表，该列表将根据按下的内容更改为另一个组件。

<ion-grid style="background-color: red;">
     
        <ion-router-outlet name="view1"></ion-router-outlet>
        <ion-router-outlet name="view2"></ion-router-outlet>
    </ion-grid>

{
path: ‘card-page’,
component: CardPage,
children: [
{
path: ‘view1’,
outlet: ‘view1’,
loadChildren: () => import(’…/view1/view1.module’).then(m => m.View1PageModule)
},
{
path: ‘view2’,
outlet: ‘view2’,
loadChildren: () => import(’…/view2/view2.module’).then(m => m.View2PageModule)
}