Question

我正在尝试创建三个可以在顶部的导航栏之间切换的组件。当我单击导航栏以切换到其他组件时，我希望导航栏在顶部保持静态并且不重新加载，只有新组件才能加载。

我已经尝试过一些有关导航栏的教程，例如：https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black

我也尝试过使用'？'在3个组件的路径中，例如path：'toplevel？component1'

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

Answer 1

您有2种解决方法：

1。正确的方法（使用路由）： https://angular.io/guide/router

2。一种简单的方法：

TS：

class SimpleComponent {
    value: number;
}

HTML

<component-0 *ngIf="value === 0"></component-0>
<component-1 *ngIf="value === 1"></component-1>
<component-2 *ngIf="value === 2"></component-2>

您也可以使用ngSwitch。

Answer 2

有不同的方法，

最佳实践是使用路由，并使导航栏保持静态，您要做的就是：
```
<nav>This is your navbar</nav>    
<router-outlet></router-outlet>
```

组件实际上是路由。

另一种方法是像这样使用ngSwitch：

<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>

与导航栏交互会更改“组件”的值

希望有帮助

如何在角度组件之间切换而又不重新加载整个网页？

2 个答案: