Question

我创建了一个名为bookmark的自定义组件，我只是在显示我的书签图标。

bookmark.html

<button ion-fab class="bookmark-button">
  <ion-icon *ngIf="!flag; else elseBlocked" ios="ios-bookmark" md="md-bookmark" [ngStyle]="{'color': '#9F9F9F'}" class="bookmark-icon"></ion-icon>
  <ng-template #elseBlocked><ion-icon ios="ios-bookmark" md="md-bookmark" class="bookmark-icon" [ngStyle]="{'color': '#FF6260'}"></ion-icon></ng-template> 
</button>

bookmark.module.ts

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { BookmarkComponent } from './bookmark';

@NgModule({
  declarations: [
      BookmarkComponent
  ],
  exports: [
    BookmarkComponent,
  ],
  imports: [
    IonicModule.forRoot(BookmarkComponent),
  ],
})
export class BookmarkComponentModule {}

现在，当我在离子页面中导入此组件模块时，有时它不会显示书签图标。就像在主页中它工作得很好但是当我在像Resultpage这样的其他模块中导入时它根本不起作用。

home.module.ts

import { NgModule } from "@angular/core";
import { IonicPageModule } from "ionic-angular";
import { HomePage } from "./home";
import { BookmarkComponentModule } from "../../components/bookmark/bookmark.module";

@NgModule({
  declarations: [
    HomePage,
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
    BookmarkComponentModule,
  ],
})
export class HomePageModule {}

result.module.ts

import { BookmarkComponentModule } from './../../components/bookmark/bookmark.module';
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ResultPage } from './result';

@NgModule({
  declarations: [
    ResultPage,
  ],
  imports: [
    IonicPageModule.forChild(ResultPage),
    BookmarkComponentModule
  ],
})
export class ResultPageModule {}

我不知道哪里出错了。任何建议......

Answer 1

谢谢你们的快速答复，但我似乎通过更改组件页面上的import语句解决了此问题。

bookmark.module.ts

之前

imports: [
    IonicModule.forRoot(BookmarkComponent),
    BookmarkComponentModule
],

之后

imports: [
    IonicModule,
    BookmarkComponentModule
],

当我在使用的每个组件上更改导入语句时，问题似乎都消失了。

在某些页面中不显示离子图标

1 个答案: