“离子按钮+仅图标”组件内部不起作用

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

我在另一个 S.O. 上找到了解决方案。线程。

在您的 *.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

。