*ng-如果在 ionic 5 中的 ion-modal 内不起作用

Question

我正在使用 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>
....

这是 comment.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 
}

如果我应该在 home.module.ts 或 app.module.ts 中添加 comment.module.ts，当页面加载时，它会自动加载模态而不需要用户点击任何东西，我也从路线，它没有用，请问我做错了什么

Answer 1

您的模块很可能被延迟加载。在这种情况下，文档建议您应该在模块CommentPageModule内部导入您的模态模块 ( )，在那里您需要此模态。

换句话说，您需要：

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

否则，模态组件不会完全加载。

来自文档的引用：

延迟加载模态时，需要注意的是，模态不会在打开时加载，而是在导入模态模块的模块加载时加载。

Answer 2

我在 Angular 10、Ionic 5 上遇到了同样的问题，只需导入即可解决问题

app.modual.ts类似的模态页面

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



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