Как использовать компонент вместо ионного 4

Question

В настоящее время у меня есть несколько вкладок, которые просто показывают текст прямо сейчас (стандартный / печеночный контент)

<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 {}

anyидеи?

Answer 1

Вы не можете передать компонент как свойство @input в 'ion-tab'.Он должен быть загружен на основе маршрутизации.Пожалуйста, обратитесь к этой ссылке ниже, объясняет конфигурацию 'ion-tabs'.

https://ionicacademy.com/tab-bar-ionic-4/

Answer 2

На тот случай, если кто-то столкнется с этой проблемой, я думаю, что нашел решение (или, по крайней мере, обходной путь).Если кто-то может подтвердить это, это поможет.

Мои выводы заключаются в том, что вы не можете вызывать модальное устройство так:

const modal = await this.modalController.create({
  component : FilterPage,
  mode      : "md",
  componentProps: { }
});

Компонент FilterPage isnнедоступно в компоненте Tab.Если вы попытаетесь, это вызовет ошибку, которая говорит:

"Uncaught (in promise): Error: No component factory found for [object Object]. Did you add it to @NgModule.entryComponents?"

Добавление его в модуль или модуль приложения не решит эту проблему, и это сообщение об ошибке будет отображаться.

Решение Я нашел довольно простое, но заняло у меня часы моей жизни.Вызовите модал так:

var modal = this.modalController.create(FilterPage); 
return await modal.present();

Я думаю, что таким образом Ionic вместо этого пытается пропустить компонент, а не страницу.

Примечание: это было в таблице Ionic v4 (ionic (Ionic CLI): 4.10.1)

Answer 3

Вам необходимо добавить компонент в массив объявлений, чтобы зарегистрировать его

declarations : [
  StandardComponent
]