Как я могу переключаться между угловыми компонентами без перезагрузки всей веб-страницы?

Question

Я пытаюсь создать три компонента, которые можно переключать с помощью навигационной панели вверху. Когда я нажимаю на панель навигации, чтобы переключиться на другой компонент, я хочу, чтобы панель навигации оставалась статичной в верхней части и не перезагружалась, должен загружаться только новый компонент.

Я пробовал несколько учебных пособий для панелей навигации, таких как эта: https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black

Я также пытался использовать '?' в пути из 3 компонентов, например, путь: 'toplevel? component1'

Все, что я пробую, по-прежнему перезагружает всю страницу. Есть ли способ сохранить статичность навигационной панели между двумя компонентами?

Answer 1

Существуют различные способы,

1. . Лучше всего использовать маршрутизацию и поддерживать статическую панель навигации, все что вам нужно сделать, это:

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

при взаимодействии с навигационной панелью изменяет значение "component"

Надеюсь, это поможет

Answer 2

У вас есть 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.