组件内的"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指令只是被忽略了.按钮仍然具有背景颜色.如果我将模板放在组件外部,它会显示正确的样式.

看起来这些指令在Component内部不可用.我的组件位于自定义模块中,而不是在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 上的一个样式问题，需要工具栏或离子按钮的直接子按钮才能获得正确的样式。