0

我正在使用 ionic 6 和 angular，我正在使用 Super Tabs；如果我编写简单的超级标签，例如：

<ion-header [translucent]="true">
    <ion-navbar>
        <ion-title>{{ pages[selectedTabIndex].title }}</ion-title>
    </ion-navbar>
</ion-header> 
<super-tabs>
    <super-tabs-toolbar slot="top">
        <super-tab-button>
            <ion-icon name="home"></ion-icon>
            <ion-label>Page #1</ion-label>    
        </super-tab-button>
    </super-tabs-toolbar>
    <super-tabs-container>
        <super-tab>
        <ion-content>Page #1</ion-content>
        </super-tab>
    </super-tabs-container>
</super-tabs>

它工作得很好，但我试图动态地使用带有数组的单独页面，例如：

pages = [
{ pageName: ProductsPage, title: 'Products', icon: 'flame', id: 'productsPage'},
{ pageName: SettingsPage, title: 'Settings', icon: 'help-circle', id: 'settingsPage'}
];

和编码超级标签，如：

<super-tabs tabsPlacement="top"  (tabSelect)="onTabSelect($event)">
    <super-tabs-container>
        <super-tab *ngFor="let page of pages" [root]="page.pageName" [icon]="page.icon" [id]="page.id"></super-tab>      
    </super-tabs-container>
</super-tabs>

它不会将页面与超级标签连接起来......也许超级标签与这种编码方式不兼容？还是我在代码中做错了什么？

我的离子配置是：

Ionic:

   Ionic CLI                     : 6.16.3 (C:\Users\npule\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.6.12
   @angular-devkit/build-angular : 12.1.4
   @angular-devkit/schematics    : 12.1.4
   @angular/cli                  : 12.1.4
   @ionic/angular-toolkit        : 4.0.0

Capacitor:

   Capacitor CLI      : 3.1.2
   @capacitor/android : 3.1.2
   @capacitor/core    : 3.1.2
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 1.4.0

提前感谢大家！干杯!

4

0 回答 0