Angular 组件中有 7 个选项卡
Angular 7 Tabs in component
需要创建一个有 say - 2 个选项卡的组件
单击每个选项卡需要重定向到特定组件。
例如 - 假设我在一个页面上有两个选项卡 - 选项卡 1、选项卡 2
单击选项卡 1 需要查看 Component_1
单击选项卡 2 需要查看 Component_2
要清楚 UI 类似于- https://material.angular.io/components/tabs/api
但无论如何不使用 Angular material 选项卡
你可以为它创建一个头部组件并在应用组件上定义它,然后启动路由导航并提供路由可能会帮助你
<header-component></header-component><router-outlet></router-outlet>
您需要动态加载 Component_1 和 Component_2。动态意味着,应用程序中的组件位置未在构建时定义。这意味着,它不在任何 angular 模板中使用。相反,组件在运行时被实例化并放置在应用程序中。请参阅 here 如何在 Angular7 中动态创建组件
您可以使用 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>
为每个对象维护一个 'Tabs' 数组变量 属性 'type'。
例如:Tabs: any[] = [ {name:'Tab1', type:'tab1'} , {name:'Tab2', type:'tab2'}];
基于 'type' 属性、load/Switch HTML 中的特定 Tab 组件。
例如:
<div *ngFor='let tab of Tabs' [ngSwitch]="tab.type">
<tab1-comp *ngSwitchCase="'tab1'"></tab1-component>
<tab2-comp *ngSwitchCase="'tab2'"></tab2-component>
</div>
需要创建一个有 say - 2 个选项卡的组件 单击每个选项卡需要重定向到特定组件。
例如 - 假设我在一个页面上有两个选项卡 - 选项卡 1、选项卡 2 单击选项卡 1 需要查看 Component_1 单击选项卡 2 需要查看 Component_2
要清楚 UI 类似于- https://material.angular.io/components/tabs/api
但无论如何不使用 Angular material 选项卡
你可以为它创建一个头部组件并在应用组件上定义它,然后启动路由导航并提供路由可能会帮助你
<header-component></header-component><router-outlet></router-outlet>
您需要动态加载 Component_1 和 Component_2。动态意味着,应用程序中的组件位置未在构建时定义。这意味着,它不在任何 angular 模板中使用。相反,组件在运行时被实例化并放置在应用程序中。请参阅 here 如何在 Angular7 中动态创建组件
您可以使用 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>
为每个对象维护一个 'Tabs' 数组变量 属性 'type'。
例如:Tabs: any[] = [ {name:'Tab1', type:'tab1'} , {name:'Tab2', type:'tab2'}];
基于 'type' 属性、load/Switch HTML 中的特定 Tab 组件。
例如:
<div *ngFor='let tab of Tabs' [ngSwitch]="tab.type">
<tab1-comp *ngSwitchCase="'tab1'"></tab1-component>
<tab2-comp *ngSwitchCase="'tab2'"></tab2-component>
</div>