"Przycisk jonowy + ikona tylko" komponent wewnętrzny nie działa

Question

Używam jonowego 3. *, tring, aby utworzyć komponent zawierający tylko jeden przycisk.

Kod składnikiem jest:

@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 
    }); 
    } 
} 

i mój szablon jest:

<button ion-button icon-only (click)="presentPopover($event)" title="Profile"> 
    <ion-icon name="person"></ion-icon> 
</button> 

Problem:

Problem polega na tym, że dyrektywa icon-only jest po prostu ignorowana. Przycisk nadal ma kolor tła. Po umieszczeniu szablonu poza komponentem pokazuje on właściwy styl.

Wygląda na to, że dyrektywy nie są dostępne wewnątrz komponentu. Mój komponent znajduje się wewnątrz niestandardowego modułu, a nie na AppModule.

Jak mogę to rozwiązać? Stwierdzono, że na Ionic2 muszę ręcznie zaimportować dyrektywy, ale nie działa na Ionic3.

Answer 1

mam rozwiązać ten problem, być może z workarround:

1. Zmieniono selektor komponentów do selektora atrybutu: [profile-button]
2. Zawinięty szablon w tagu
3. Nazwany składnik jako atrybut <ion-buttons end>

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

Uwaga: Problem nie był z dyrektywą icon-only. Ale jest to problem stylu na Ionic, który wymaga przycisku bezpośrednio dziecko paska narzędzi lub przycisków jonowych, aby uzyskać odpowiednie style.

Answer 2

W szablonie spróbuj dodać zawartość jonów wewnątrz zawartości

<ion-content> 
</ion-content> 

Answer 3

można usunąć ion-button i dodać:

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

zmianę dark jak chcesz.