如何使用 angular7 在特定 div 中加载页面
How to load a page in specific div using angular7
在我的项目中，我有使用 mat-tree 开发的左侧菜单（如侧边导航）和当我们 select 或单击左侧菜单时显示内容的右侧。
在这里，用黄色突出显示的是使用 mat-tree sideNav and contents 构建的
如果我们 select 左侧的任何选项，例如，如果我 select "checkbox" 如给定的 link Content on selection of menu 那么右侧应该加载内容而不刷新并保留左侧导航。
样本 link 供参考，https://material.angular.io/components/checkbox/overview
注意：我的 app.component.html 中已有一个。这个左侧导航和右侧内容是在 diff component.html 中开发的。
因此，除了 app.component.html 之外，我还需要另一个不同的组件。
我试过在组件中。当我导航时，它会路由到一个新页面。我想要的是在右侧的同一页中显示。
您可以使用路由：https://angular.io/guide/router
在您的根组件模板 (app.component.html) 中，您可以具有以下结构：
<app-with-mat-tree></app-with-mat-tree>
<router-outlet></router-outlet>
要在页面的特定部分加载任何组件，您需要使用 <router-outlet></router-outlet> 标记
我创建了一个简单的演示供您理解：https://stackblitz.com/edit/angular-mof1tg
快乐编码:)
在我的项目中，我有使用 mat-tree 开发的左侧菜单（如侧边导航）和当我们 select 或单击左侧菜单时显示内容的右侧。 在这里，用黄色突出显示的是使用 mat-tree sideNav and contents 构建的 如果我们 select 左侧的任何选项，例如，如果我 select "checkbox" 如给定的 link Content on selection of menu 那么右侧应该加载内容而不刷新并保留左侧导航。 样本 link 供参考，https://material.angular.io/components/checkbox/overview
注意：我的 app.component.html 中已有一个。这个左侧导航和右侧内容是在 diff component.html 中开发的。 因此，除了 app.component.html 之外，我还需要另一个不同的组件。 我试过在组件中。当我导航时，它会路由到一个新页面。我想要的是在右侧的同一页中显示。
您可以使用路由：https://angular.io/guide/router
在您的根组件模板 (app.component.html) 中，您可以具有以下结构：
<app-with-mat-tree></app-with-mat-tree>
<router-outlet></router-outlet>
要在页面的特定部分加载任何组件，您需要使用 <router-outlet></router-outlet> 标记
我创建了一个简单的演示供您理解：https://stackblitz.com/edit/angular-mof1tg
快乐编码:)