ionic-framework - "ion-button + icon-only"内部组件不工作

Question

我正在使用 Ionic 3.*，创建一个仅包含一个按钮的组件。

组件代码为:

@Component({
  selector: 'profile-button',
  templateUrl: 'profile-button.html',
})
export class ProfileButtonComponent {
  constructor(
    private popoverCtrl: PopoverController
  ) {}

  /**
   * Present the Profile popover
   * @param ev
   * @returns {Promise<any>}
   */
  async presentPopover(ev) {
    let popover = this.popoverCtrl.create(ProfilePopover);

    return popover.present({
      ev
    });
  }
}

我的模板是:

<button ion-button icon-only (click)="presentPopover($event)" title="Profile">
    <ion-icon name="person"></ion-icon>
</button>

问题:

问题是 icon-only指令只是被忽略。该按钮仍然具有背景颜色。
如果我将模板放在组件之外，它会显示正确的样式。

看起来指令在组件中不可用。我的组件在自定义模块内，而不是在 AppModule 上。

我该如何解决这个问题？发现在 Ionic2 上我需要手动导入指令，但它不适用于 Ionic3。

Answer 1

我在 another S.O. thread 上找到了解决方案.

在你的 *.module.ts 添加 IonicModule进入 imports部分。

@NgModule({
  imports: [
    CommonModule,  // <-- standard Angular module
    IonicModule    // <-- standard ionic module
  ], ...
})