angular - 如何使用angular7在特定div中加载页面

Question

在我的项目中，我有使用 mat-tree 开发的左侧菜单（如侧导航）和右侧，当我们选择或单击左侧菜单时显示内容。在这里，用黄色突出显示的内容是使用 mat-tree sideNav 和内容构建 的刷新并保留左侧导航。示例链接供参考，https://material.angular.io/components/checkbox/overview

注意：我的 app.component.html 中已经有一个。这个左侧导航和右侧内容是在 diff component.html 中开发的。因此，除了 app.component.html 之外，我还需要另一个组件中的另一个。我尝试在组件中。当我导航时，它会路由到新页面。我想要的是显示在右侧的同一页面中。

Answer 1

您可以使用路由：https ://angular.io/guide/router

在根组件的模板 (app.component.html) 中，您可以具有以下结构：

<app-with-mat-tree></app-with-mat-tree>
<router-outlet></router-outlet>

Answer 2

为了在页面的特定部分加载任何组件，您需要使用<router-outlet></router-outlet>标签

我创建了一个简单的演示供您理解：https ://stackblitz.com/edit/angular-mof1tg

快乐编码:)