组件内部的“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

我已经解决了这个问题，也许有一个解决方法：

1. 将组件选择器更改为属性选择器：[profile-button]
2. 将模板包装在<ion-buttons end> 标记中
3. 将组件调用为<ion-buttons end>的属性

<ion-buttons profile-button end></ion-buttons>

注意：问题不在于icon-only 指令。但这是 Ionic 上的样式问题，需要工具栏或离子按钮的直接子按钮才能获得正确的样式。

Answer 2

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

在您的 *.module.ts 中将 IonicModule 添加到 imports 部分。

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

Answer 3

在您的模板中尝试在 ion-content 中添加您的内容

<ion-content>
</ion-content>

Answer 4

您可以删除ion-button 并添加：

class="disable-hover button button-ios button-clear button-clear-ios button-clear-ios-dark"

随意更改dark。