Блог

я создаю мобильное приложение с ionic 5, когда я пытаюсь вызвать ion-modal, в котором есть *ng-If , я получаю эту ошибку

 Can't bind to 'ngIf' since it isn't a known property of 'ion-header'.
  

Модальным является раздел комментариев в comment.page.ts, вот код для comment.page.html

 <ion-header class="ion-no-border" *ngIf="!isLoading">
    <ion-toolbar>
        <ion-title class="centerAM">{{no_comm | shortNumber}} comment{{no_comm>1?'s':''}}</ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
....
  

вот код для комментария.module.ts

 import { NgModule } from '@angular/core';
import { IonicModule } from '@ionic/angular'; 
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { NgxEmojModule } from 'ngx-emoj';

import { CommentPageRoutingModule } from './comment-routing.module';
import { CommentPage } from './comment.page';
import { PipesModule } from '../../pipes/pipes.module';
 
@NgModule({
    imports: [
        CommonModule,
        NgxEmojModule,
        PipesModule,
        FormsModule,
        IonicModule,
        CommentPageRoutingModule
    ],
    schemas: [],
    declarations: [ CommentPage]    
})
export class CommentPageModule {}
  

вот функция, которая вызывает модал из home.page.ts

 async CommentModal(i, id) {
    const modal = await this.modalCtrl.create({
        component: CommentPage,
        componentProps:{id},
        swipeToClose: true,
        cssClass: 'comment-modal'
    });
    await modal.present();
    return 
}
  

Если я должен добавить comment.module.ts в home.module.ts или app.module.ts, при загрузке страницы она автоматически загрузит modal без того, чтобы пользователь что-либо нажимал, и я также удалил страницу из маршрута, и это не сработало, пожалуйста, что я делаю не так

Вполне вероятно, что ваши модули загружаются с задержкой. В этом случае документы предполагают, что вы должны импортировать свой модальный модуль ( CommentPageModule ) внутрь модуля, где вам требуется этот модальный.

Другими словами, вам нужно:

 ...
@NgModule({
    imports: [
      ...
      CommentPageModule, // <--- here
    ]
...
export class YourMainModule {}
  

В противном случае модальный компонент загружается не полностью.

Цитата из документов:

При отложенной загрузке модала важно отметить, что модал будет загружен не при его открытии, а скорее при загрузке модуля, который импортирует модуль модала.

Я столкнулся с той же проблемой в angular 10, Ionic 5, и проблема решена простым импортом

модальная страница в app.modual.ts подобном

 import { ModalPage } from './modules/core/modal/modal/modal.page';



@NgModule({
  declarations: [
   ...
    ModalPage
  ]
  

просто добавьте компонент, который будет использоваться

 @NgModule({
    imports: [
        CommonModule,
        FormsModule,
        IonicModule,
        UpdatePageRoutingModule],
    declarations: [UpdatePage, DownloadModalComponent],
    entryComponents: [DownloadModalComponent]
})
export class UpdatePageModule {}  

в модальном в объявлениях вашего модуля и компонентах входа, подобных этому

где DownloadModalComponent — это компонент, который используется в режиме UpdatePage.

Вам нужно убедиться, что вы импортировали BrowserModule в свой модуль.

 import {BrowserModule} from '@angular/platform-browser'; 
....
@NgModule({
    imports: [
      BrowserModule,
    ]
....