"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のスタイル上の問題で、ツールバーやイオンボタンの子供が適切なスタイルを得るために必要でした。

Answer 2

をイオンコンテンツ

<ion-content> 
</ion-content> 

Answer 3

あなたはion-buttonを削除して追加することができます。

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

変更darkをしたいと。