如何解决* ng-如果无法在离子5的离子模态内部工作
我正在使用离子5构建移动应用程序,当我尝试调用其中带有*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,则在页面加载时,它将自动加载模式,而无需用户单击任何内容,并且我还删除了路线上的页面,但没有用,请问我在做什么错
解决方法
您的模块可能正在延迟加载。在这种情况下,the docs建议您将模态模块(CommentPageModule
)导入需要模态的模块内部。
换句话说,您需要:
...
@NgModule({
imports: [
...
CommentPageModule,// <--- here
]
...
export class YourMainModule {}
否则,模式组件不会完全加载。
从文档中引用:
,在延迟加载模态时,需要特别注意的是,打开模态时不会加载模态,而是在加载导入模态模块的模块时加载。
只需添加将要使用的组件
@NgModule({
imports: [
CommonModule,FormsModule,IonicModule,UpdatePageRoutingModule],declarations: [UpdatePage,DownloadModalComponent],entryComponents: [DownloadModalComponent]
})
export class UpdatePageModule {}
在你的模块声明和 entryComponents 这样的模态中
其中 DownloadModalComponent 是在 UpdatePage 模式中使用的组件。
,您需要确保已将BrowserModule
导入到模块中。
import {BrowserModule} from '@angular/platform-browser';
....
@NgModule({
imports: [
BrowserModule,]
....
,
我在Angle 10,Ionic 5上遇到了相同的问题,而该问题仅通过导入即可解决
app.modual.ts
中的模式网页,如
import { ModalPage } from './modules/core/modal/modal/modal.page';
@NgModule({
declarations: [
...
ModalPage
]
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。