组件中的 Angular 7 选项卡

Question

需要创建一个组件 - 单击每个选项卡的 2 个选项卡需要重定向到特定组件。

例如 - 假设我在一个页面上有两个选项卡 - Tab 1，Tab 2 点击 Tab 1 需要看到 Component_1 点击 Tab 2 需要看到 Component_2

要清楚 UI 之类的东西 - 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 。

模块.ts

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

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

文件.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>

Answer 3

您可以为它创建一个标题组件并在应用程序组件上定义它，然后启动路由器导航并提供路由可能会帮助您

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

Answer 4

您需要动态加载 Component_1 和 Component_2。 动态意味着应用程序中的组件位置不是在构建时定义的。 这意味着，它不用于任何角度模板。 相反，组件在运行时被实例化并放置在应用程序中。 在此处查看如何在 Angular7 中动态创建组件