问*ng-如果不能在ion 5中使用ion-modal
EN

Stack Overflow用户

提问于 2020-08-13 13:58:31

回答 4查看 1.4K关注 0票数 3

我正在使用ionic 5构建一个移动应用程序，当我尝试调用其中包含*ng-If的ion-modal时，我会收到以下错误

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

modal是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，当页面加载时，它会自动加载模式，而用户不需要单击任何内容，而且我还从路径中删除了页面，但它不起作用，请问我做错了什么

javascript

angular

ionic-framework

腾讯云域名特惠，新用户首年1元起

腾讯云域名专场特惠：个人新用户.cn仅8.8元/年，企业新用户.com仅1.06元/年...

回答 4

Stack Overflow用户

发布于 2020-10-07 15:30:34

您的模块很可能是延迟加载的。在这种情况下，the docs建议您应该将您的模态模块(CommentPageModule)导入模块中，因为您需要这个模态。

换句话说，您需要：

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

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

引用自文档：

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

票数 6

Stack Overflow用户

发布于 2020-12-11 12:55:13

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

app.modual.ts中的模式页面，如

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



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

票数 4

Stack Overflow用户

发布于 2021-03-20 11:46:22

只需添加要使用的组件

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