[英]*ng-if not working inside ion-modal in ionic 5
i am building a mobile app with ionic 5, when I try to call ion-modal that has an *ng-If
in it, i would get this error我正在使用 ionic 5 构建一个移动应用程序,当我尝试调用其中包含
*ng-If
的 ion-modal 时,我会收到此错误
Can't bind to 'ngIf' since it isn't a known property of 'ion-header'.
The modal is a comment section in comment.page.ts, here is the code for the comment.page.html modal是comment.page.ts中的一个comment section,这里是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>
....
here is the code for the comment.module.ts这是 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 {}
here is the function that calls the modal from the home.page.ts这是从 home.page.ts 调用模态的 function
async CommentModal(i, id) {
const modal = await this.modalCtrl.create({
component: CommentPage,
componentProps:{id},
swipeToClose: true,
cssClass: 'comment-modal'
});
await modal.present();
return
}
If i should add the comment.module.ts in the home.module.ts or the app.module.ts, when the page loads, it will automatically load the modal without the user clicking anything, and i also removed the page from the route and it didn't work, please what am i doing wrong如果我应该在 home.module.ts 或 app.module.ts 中添加comment.module.ts,当页面加载时,它将自动加载模态,而无需用户单击任何内容,并且我还从路线,它没有用,请问我做错了什么
It is likely that your modules are being lazy-loaded.您的模块很可能是延迟加载的。 In that case the docs suggest that you should import your modal module (
CommentPageModule
) inside of the module, where you require this modal.在这种情况下,文档建议您应该在需要此模态的模块内导入模态模块(
CommentPageModule
)。
In other words, you need:换句话说,您需要:
...
@NgModule({
imports: [
...
CommentPageModule, // <--- here
]
...
export class YourMainModule {}
Otherwise, the modal component doesn't get fully loaded.否则,模态组件不会完全加载。
Quote from the docs:从文档中引用:
When lazy loading a modal, it's important to note that the modal will not be loaded when it is opened, but rather when the module that imports the modal's module is loaded.
延迟加载模态时,需要注意的是,模态不会在打开时加载,而是在加载导入模态的模块时加载。
I got the same issue on angular 10, Ionic 5, and the issue resolved by just import我在 angular 10、Ionic 5 上遇到了同样的问题,只需导入即可解决问题
modal page in app.modual.ts
like app.modual.ts
中的模态页面
import { ModalPage } from './modules/core/modal/modal/modal.page';
@NgModule({
declarations: [
...
ModalPage
]
just add the component which will be used只需添加将要使用的组件
@NgModule({ imports: [ CommonModule, FormsModule, IonicModule, UpdatePageRoutingModule], declarations: [UpdatePage, DownloadModalComponent], entryComponents: [DownloadModalComponent] }) export class UpdatePageModule {}
in modal in your module declarations and entryComponents like this在你的模块声明和 entryComponents 这样的模式中
where DownloadModalComponent is a component which is being used in a modal of UpdatePage.其中 DownloadModalComponent 是在 UpdatePage 模式中使用的组件。
You need to make sure that you've imported the BrowserModule
to your module.您需要确保已将
BrowserModule
导入到您的模块中。
import {BrowserModule} from '@angular/platform-browser';
....
@NgModule({
imports: [
BrowserModule,
]
....
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.