'ion-tab' 不是已知元素

Question

尝试使用 ion-tabs 和 ion-tab，我无法弄清楚我错过了什么我
肯定错过了一些明显的东西：

'ion-tab' is not a known element

我的 page.html 是：

<ion-tabs>
    <ion-tab tab="makuuchi">
        <ion-header translucent>
            <ion-toolbar>
                <ion-title>Makuuchi</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content fullscreen class="ion-padding">
            <h1>Makuuchi</h1>
        </ion-content>
    </ion-tab>
    <ion-tab-bar slot="top">
        <ion-tab-button tab="makuuchi">
            <ion-label>Makuuchi</ion-label>
            <ion-icon name="people"></ion-icon>
        </ion-tab-button>
        <ion-tab-button tab="juryo">
            <ion-label>Juryo</ion-label>
            <ion-icon name="people"></ion-icon>
        </ion-tab-button>
    </ion-tab-bar>
</ion-tabs>

ion-tab-bar 和 ion-tabs 很好。删除 ion-tab 后，页面将正确显示

我的 package.json 的依赖项

"dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.1.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.29"
  },

项目是用ionic cli生成的

Ionic:
   Ionic CLI                     : 5.0.2 (/home/christophe/.nvm/versions/node/v8.10.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.5.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1
Utility:
   cordova-res : not installed
   native-run  : not installed
System:
   NodeJS : v8.10.0 (/home/christophe/.nvm/versions/node/v8.10.0/bin/node)
   npm    : 6.9.0
   OS     : Linux 4.18

我的模块.ts

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [RikishisPage]
})
export class RikishisPageModule {}

离子标签在这里找到：node_modules/@ionic/angular/dist/directives/navigation/ion-tabs.d.ts
离子标签不存在
我目前正在寻找强制加载离子标签的解决方案

谢谢你的帮助

Answer 1

根据我对你的问题的理解，我坚信你ionic module在模块中缺失了。所以我建议你添加它们。

@NgModule({
  declarations: [
//add component declaration
],
  imports: [
    IonicModule //add ionic module here
  ]
})

Answer 2

我回答我自己的问题：Typescript 中不存在 ion-tab。
选项卡 ui 组件上的示例代码仅在 javascript 中使用 ion-tab ！

Answer 3

尝试用 ion-tab-bar 替换ion - tab，因此您的代码如下所示。

来源在这里

    <ion-tabs>
        <ion-tab-bar tab="makuuchi">
            <ion-header translucent>
                <ion-toolbar>
                    <ion-title>Makuuchi</ion-title>
                </ion-toolbar>
            </ion-header>
            <ion-content fullscreen class="ion-padding">
                <h1>Makuuchi</h1>
            </ion-content>
        </ion-tab-bar>
        <ion-tab-bar slot="top">
            <ion-tab-button tab="makuuchi">
                <ion-label>Makuuchi</ion-label>
                <ion-icon name="people"></ion-icon>
            </ion-tab-button>
            <ion-tab-button tab="juryo">
                <ion-label>Juryo</ion-label>
                <ion-icon name="people"></ion-icon>
            </ion-tab-button>
        </ion-tab-bar>
    </ion-tabs>

在本地进行测试，正在显示视图，您应该保持路由不变。