Question

需要创建一个包含2个标签的组件单击每个选项卡时，需要重定向到特定组件。

例如-假设我在一个页面上有两个标签-标签1，标签2 单击选项卡1时需要查看Component_1 点击选项卡2时需要查看Component_2

要使界面清晰，类似-https://material.angular.io/components/tabs/api

但是可以不使用Angular材质标签

Answer 1

为每个对象维护一个具有属性“ type”的“ Tabs”数组变量。例如：Tabs: any[] = [ {name:'Tab1', type:'tab1'} , {name:'Tab2', type:'tab2'}]; 根据'type'属性，在HTML中加载/切换特定的Tab组件。例如：

<div *ngFor='let tab of Tabs' [ngSwitch]="tab.type">
     <tab1-comp *ngSwitchCase="'tab1'"></tab1-component>
     <tab2-comp *ngSwitchCase="'tab2'"></tab2-component>
</div>

Answer 2

您可以使用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>

组件中的Angular 7制表符

2 个答案: