[英]Angular 7 Tabs in component
需要創建一個組件 - 單擊每個選項卡的 2 個選項卡需要重定向到特定組件。
例如 - 假設我在一個頁面上有兩個選項卡 - Tab 1,Tab 2 點擊 Tab 1 需要看到 Component_1 點擊 Tab 2 需要看到 Component_2
要清楚 UI 之類的東西 - https://material.angular.io/components/tabs/api
但不使用 Angular 材質選項卡的任何方式
為每個對象維護一個帶有屬性“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>
您可以為此使用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>
您可以為它創建一個標題組件並在應用程序組件上定義它,然后啟動路由器導航並提供路由可能會幫助您
<header-component></header-component><router-outlet></router-outlet>
您需要動態加載 Component_1 和 Component_2。 動態意味着應用程序中的組件位置不是在構建時定義的。 這意味着,它不用於任何角度模板。 相反,組件在運行時被實例化並放置在應用程序中。 在此處查看如何在 Angular7 中動態創建組件
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.