В Angular есть несколько способов организации вкладок. Вот два наиболее популярных подхода - использование роутинга или создание компонента вкладок.
1. Использование роутинга:
В этом подходе каждая вкладка будет представлять отдельный маршрут в приложении. Для начала создадим компоненты, соответствующие каждой вкладке. Например, если у нас есть 3 вкладки: Home, About и Contact, то создадим HomeComponent, AboutComponent и ContactComponent.
Затем определим маршруты для этих компонентов в файле app-routing.module.ts:
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'contact', component: ContactComponent },
];
Импортируйте RouterModule в AppModule и добавьте его в imports массив, а также добавьте <router-outlet> в шаблон AppComponent:
import { RouterModule, Routes } from '@angular/router';
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
<router-outlet></router-outlet>
Теперь вы можете использовать ссылки или функции routerLink для навигации между вкладками:
<a routerLink="/home">Home</a> <a routerLink="/about">About</a> <a routerLink="/contact">Contact</a>
2. Создание компонента вкладок:
В этом подходе создаем отдельный компонент, который будет содержать в себе компоненты вкладок. Создадим компонент TabsComponent, в шаблоне которого будут размещены кнопки для переключения между вкладками, а под ними условные инструкции *ngIf, показывающие соответствующий компонент в зависимости от выбранной вкладки:
<div>
<button (click)="activeTab = 'home'">Home</button>
<button (click)="activeTab = 'about'">About</button>
<button (click)="activeTab = 'contact'">Contact</button>
</div>
<div *ngIf="activeTab === 'home'">
<app-home></app-home>
</div>
<div *ngIf="activeTab === 'about'">
<app-about></app-about>
</div>
<div *ngIf="activeTab === 'contact'">
<app-contact></app-contact>
</div>
В данном случае, вешаем на каждую кнопку событие (click), которое будет изменять свойство activeTab в компоненте TabsComponent. По значению этого свойства, будет отображаться соответствующий компонент.
Результат обоих подходов схож - при выборе вкладки будет отображен соответствующий контент. Однако, применение роутинга полезнее, если требуется использовать URL-сегменты в адресной строке для навигации между вкладками, также комбинирование роутинга и создания компонента вкладок может быть использовано для создания более сложного управления вкладками.