分量角7表
分量角7表
提问于 2019-03-12 21:03:59
需要创建一个组件，在每个选项卡上单击-2个选项卡，需要重定向到特定组件。
例如，我在一个页面上有两个选项卡- Tab 1，Tab 2在单击Tab 1时需要看到Component_1，单击Tab 2需要看到Component_2。
为了清晰的UI，类似于- https://material.angular.io/components/tabs/api
但任何不使用角质物质的方法
回答 4
Stack Overflow用户
回答已采纳
发布于 2019-03-12 23:00:25
为此您可以使用ngx-自举。
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>
Stack Overflow用户
发布于 2019-03-31 22:53:54
为每个对象维护一个带有属性“type”的'Tabs‘数组变量。基于“类型”属性的Tabs: any[] = [ {name:'Tab1', type:'tab1'} , {name:'Tab2', type:'tab2'}];，在HTML中加载/切换特定选项卡的组件。例：
<div *ngFor='let tab of Tabs' [ngSwitch]="tab.type">
<tab1-comp *ngSwitchCase="'tab1'"></tab1-component>
<tab2-comp *ngSwitchCase="'tab2'"></tab2-component>
</div>Stack Overflow用户
发布于 2019-03-12 21:10:52
您可以为它创建一个标头组件，并在app组件上定义它，然后启动路由器导航，并给出路由可能会帮助您解决问题。
<header-component></header-component><router-outlet></router-outlet>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55134736
复制相关文章
相似问题
腾讯云开发者
