angular - 切换到 @IonicPage 组件时，离子图标不再显示

Question

将我的页面更改为延迟加载（通过带有单独模块的@IonicPage）后，所有离子都消失了。直接在 app.module.ts 中声明组件时，一切正常。

我确实找到了使用 web components 的解决方法，但它非常麻烦，我仍然认为这要么是一个错误，要么我不知道如何导入正确的模块，或者没有按预期创建结构。

这就是我使用离子的方式：

 <button [navPush]="'admin'" ion-button icon-end>
        Admin
        <ion-icon name="star"></ion-icon>
 </button>

• 破解版：https ://github.com/ScaleIT-Org/ionic-app-skeleton/tree/ionicon-broken
• “无延迟加载”工作版本：https ://github.com/ScaleIT-Org/ionic-app-skeleton/tree/ionicon-fix-no-lazy-load
• 固定（解决方法 #499）版本：https ://github.com/ScaleIT-Org/ionic-app-skeleton/tree/ionicon-workaround-fix

它应该是什么样子：

切换到单独的模块和@IonicPage 组件后，图标不再可见：

我还创建了一个包含所有细节的问题： https ://github.com/ionic-team/ionicons/issues/526

我的问题是：我们是否需要在代码中显式导入离子子作为模块？如果是这样，我该怎么做。

非常感谢您的任何帮助，在此先感谢您。

Answer 1

您需要在任何使用 Ionic 组件的组件模块中导入 IonicModule，而不是使用 forRoot()，而只需导入 IonicModule。

按如下方式更新您的components.module.ts文件：

import { NgModule } from "@angular/core";
import { IonicModule } from "ionic-angular";
import { AppFooterComponent } from './app-footer/app-footer';
import { AppHeaderComponent } from './app-header/app-header';
@NgModule({
  declarations: [
    AppFooterComponent,
    AppHeaderComponent
  ],
  imports: [
    IonicModule,
  ],
  exports: [
    AppFooterComponent,
    AppHeaderComponent
  ]
})
export class ComponentsModule {}