如何不重新加载组件 Angular

Question

我在 app.component.html 中有一个侧边菜单的布局，它包含了我的应用程序的真实内容。

当我访问一个链接以转到另一个页面时，我希望只重新加载我的应用程序的内容，而不是整个内容。有两个原因，一是视觉延迟让应用看起来很慢，二是我更容易显示当前选择的菜单。

Answer 1

你必须为此使用路由。

基本上，您的 app.component.html 将包含这些行

<app-header></app-header>           // This will render the header component
<router-outlet></router-outlet>     // This will render all the route changes
<app-footer></app-footer>           // This will render the footer

工作示例：页眉和页脚不会重新加载，即使选择的选项卡也会突出显示

My Portfolio
Angular Scaffolding // 看看这个，你甚至可以看看它是如何工作的代码。随心所欲地分叉。

参考

Angular Routing 是一个相当大的话题，值得一整页。

看看它是如何工作的：Angular.io 文档