Html 如何在不重新加载整个网页的情况下在角度组件之间切换？

我正在尝试创建三个组件，它们可以通过顶部的导航栏进行切换。当我单击导航栏切换到其他组件时，我希望导航栏在顶部保持静态，而不是重新加载，只加载新组件

我尝试了一些导航栏的教程，比如：

我还尝试在3个组件的路径中使用“？”，例如路径：“toplevel？component1”

---

我尝试的所有内容仍然会重新加载整个页面。有没有办法让导航栏在两个组件之间保持这样的静态？

有两种方法可以解决这个问题：

1。正确的方法（使用路由）：

2。一个简单的方法：

TS:

HTML

---

您也可以使用ngSwitch。

有不同的方法

使用路由是最佳实践，要保持导航栏静态，您需要做的就是：

<nav>This is your navbar</nav>    
<router-outlet></router-outlet>

这是您的导航栏

其中组件实际上是路由

另一种方法是这样使用：

<ng-container [ngSwitch]="component">
<app-component-1 *ngSwitchCase="1"></app-component-1>
<app-component-2 *ngSwitchCase="2"></app-component-1>
<app-component-3 *ngSwitchCase="3"></app-component-1>
</ng-container>

使用导航栏交互更改“组件”的值

---

希望有帮助

绝对是的。使用@angular/router可以非常简单地实现这一点。您需要提供您的代码，包括路由配置和组件结构当前的外观。请共享一个最小的可验证代码片段，供其他人查看您迄今为止的尝试。有关如何创建的更多详细信息，请参见此处的官方路由示例：You seem to lost。读，查

<nav>This is your navbar</nav>    
<router-outlet></router-outlet>

<ng-container [ngSwitch]="component">
<app-component-1 *ngSwitchCase="1"></app-component-1>
<app-component-2 *ngSwitchCase="2"></app-component-1>
<app-component-3 *ngSwitchCase="3"></app-component-1>
</ng-container>