Угловые 7 вкладок в компоненте - PullRequest
Новая
       17

Угловые 7 вкладок в компоненте

0 голосов
/ 13 марта 2019

Нужно создать компонент, скажем - 2 вкладки При нажатии на каждую вкладку необходимо перенаправить на конкретный компонент.

для ex - скажем, у меня есть две вкладки на одной странице - вкладка 1, вкладка 2 при нажатии на вкладку 1 нужно увидеть компонент_1 при нажатии на вкладку 2 необходимо увидеть компонент_2

Чтобы быть понятным UI что-то вроде - https://material.angular.io/components/tabs/api

но без использования угловых вкладок материала

Ответы [ 4 ]

2 голосов
/ 01 апреля 2019

Поддерживает переменную массива 'Tabs' со свойством 'type' для каждого объекта.Например: Tabs: any[] = [ {name:'Tab1', type:'tab1'} , {name:'Tab2', type:'tab2'}]; На основе свойства 'type' загрузите / переключите определенный компонент Tab в HTML.например: 

<div *ngFor='let tab of Tabs' [ngSwitch]="tab.type">
     <tab1-comp *ngSwitchCase="'tab1'"></tab1-component>
     <tab2-comp *ngSwitchCase="'tab2'"></tab2-component>
</div>
1 голос
/ 13 марта 2019

Для этого вы можете использовать ngx-bootstrap .

module.ts 

import { CollapseModule, BsDropdownModule, AccordionModule, TabsModule, BsDatepickerModule } from 'ngx-bootstrap';

@NgModule({
 imports: [
    CommonModule,
    ...
    TabsModule.forRoot(),
    AccordionModule.forRoot(),
    CollapseModule.forRoot(),
    BsDropdownModule.forRoot()
 ]
})

file.html 

<div class="tabs-resp-custom">
  <ul class="nav nav-tabs">
    <li class="nav-item" >
    <a class="nav-link" [routerLink]="['tab1']" routerLinkActive="active">Tab 1</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" [routerLink]="['tab2']" routerLinkActive="active">Tab 2</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active">
      <router-outlet></router-outlet>
    </div>
</div>

0 голосов
/ 13 марта 2019

Вам необходимо динамически загружать Component_1 и Component_2.Динамический означает, что расположение компонентов в приложении не определяется во время сборки.Это означает, что он не используется ни в одном угловом шаблоне.Вместо этого компонент создается и помещается в приложение во время выполнения.См. здесь , как динамически создавать компоненты в Angular7

0 голосов
/ 13 марта 2019

Вы можете создать для него компонент заголовка и определить его в компоненте приложения, а после этого запустить навигацию маршрутизатора и назначить маршрутизацию, возможно, это поможет вам

<header-component></header-component><router-outlet></router-outlet>

...