angular - 如何使用组件代替 ionic 4
问题描述
我目前有一些标签现在只显示一些文本(标准/肝内容)
<ion-content padding class="white-bg">
<ion-tabs #dosingTabs>
<ion-tab tab="standard">standard content</ion-tab>
<ion-tab tab="hepatic">hepatic Content</ion-tab>
<ion-tab-bar slot="top" [selectedTab]="dosingType">
<ion-tab-button tab="standard">
<ion-label>Standard</ion-label>
</ion-tab-button>
<ion-tab-button tab="hepatic">
<ion-label>Hepatic<br>Impairment</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-content>
这些选项卡的内容最终会有很多标记,所以我创建了一个新组件并尝试了:
<ion-tab tab="standard" component="StandardComponent"></ion-tab>
当我转到具有选项卡的视图时,出现错误:
未找到 StandardComponent 的组件工厂。你把它添加到@NgModule.entryComponents 了吗?
所以我调整了我的模块以包含StandardComponent
在entryComponents
数组中,但错误仍然存在
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { CalculatorPage } from './calculator.page';
import { StandardComponent } from '../standard/standard.component';
const routes: Routes = [
{
path: '',
component: CalculatorPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
entryComponents: [
StandardComponent
]
})
export class CalculatorPageModule {}
有任何想法吗?
解决方案
以防万一其他人遇到这个问题,我想我找到了解决方案(或者至少是一种解决方法)。如果有人能证实这一点,那将有所帮助。
我的发现是你不能调用这样的模式:
const modal = await this.modalController.create({
component : FilterPage,
mode : "md",
componentProps: { }
});
Tab 组件中不提供组件“FilterPage”。如果你尝试它会导致一个错误,上面写着:
"Uncaught (in promise): Error: No component factory found for [object Object]. Did you add it to @NgModule.entryComponents?"
将其添加到模块或 App 模块将无法解决此问题,并且此错误消息将继续显示。
我找到的解决方案非常简单,但花了我几个小时的时间。像这样调用模态:
var modal = this.modalController.create(FilterPage);
return await modal.present();
我认为这种方式 Ionic 不是试图传递一个组件,而是一个页面。
注意:这是在 Ionic v4 表中(离子(Ionic CLI):4.10.1)