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

Question

Я сгенерировал три разных компонента в проекте angular 7

ng g c mycomp1
ng g c mycomp2
ng g c mycomp3

Теперь я хочу создать вкладки в компоненте mycop1, который выглядит следующим образом:

, нажав «Сначала», он должен отображать html или отображать содержимое из того же компонента.нажав на вторую вкладку, я должен отобразить контент из компонента mycomp2 (из другого компонента), аналогично третьей вкладке, необходимой для визуализации из компонента mycomp3.пожалуйста, помогите, как я могу приступить к этому, спасибо

Answer 1

Я не использую Angular Material, но вам нужно будет использовать маршрутизатор для навигации к каждому.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
    { path: '', loadChildren: './home/home.module#HomeModule' },

    { path: 'mycomp1', component: MyComp1Component },
    { path: 'mycomp2', component: MyComp2Component },
    { path: 'mycomp3', component: MyComp3Component }
];

Answer 2

предположим, у нас есть 4 компонента (app.component, a.component, b.component, c.component)

проверьте полный код в приведенном ниже URL-адресе https://stackblitz.com/edit/angular-gerrxm

Answer 3

У вас может быть контейнер, содержащий все 3 компонента и добавление ngIf к каждому компоненту, который решит, показывать его или нет.

И, конечно, вы всегда можете использовать вкладки угловых материалов.: https://material.angular.io/components/tabs/overview