“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

我已经解决了这个问题里面你的内容，也许与workarround：

1. 改变了组件选择器属性选择：[profile-button]
2. 用<ion-buttons end>标签包装模板
3. 将该组件称为的属性

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

注：的问题是不是与icon-only指令。但是这是Ionic的样式问题，它需要工具栏或离子按钮的按钮才能获得正确的样式。只要你想

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

变化dark：

Answer 2

在模板中尝试添加离子含量

<ion-content> 
</ion-content> 

Answer 3

你可以删除ion-button和补充。