Saya membuat Directive sederhana yang dapat ditambahkan ke tag <i> :

<i svg-icon="menu"></i>

Dibutuhkan nama file SVG (dalam contoh: menu.svg). Di mana pun saya menggunakannya, itu berfungsi dengan baik, ikon ditampilkan dengan benar, kecuali di dalam <button> Component :

<button ion-button menuToggle>
    <i svg-icon="menu"></i>
</button>

Dalam konteks ini, ikon tidak ditampilkan.

Berikut adalah konten SvgIconDirective :

import ...

@Directive({
    selector: '[svg-icon]'
})
export class SvgIconDirective implements OnInit {

    @Input('svg-icon') name: string;
    @Input() class: string;

    constructor(
        private el: ElementRef,
        private http: Http
    ) { }

    ngOnInit() {
        this.http.get(`assets/icon/ic_${this.name}.svg`).map(response => response.text()).subscribe(data => {
            let element = $(this.el.nativeElement);

            const id = element.attr('id');
            const className = element.attr('class');

            let newElement = $('<div />').html(data).find('svg');

            if (typeof id !== 'undefined') {
                newElement.attr('id', id);
            }
            if (typeof className !== 'undefined') {
                newElement.addClass(className);
            }

            $(this.el.nativeElement).replaceWith(newElement);
        });
    }
}

Dan DOM dirender di dalam tag <button> :

<button ion-button="" menutoggle="" class="disable-hover bar-buttons bar-buttons-md bar-button bar-button-md bar-button-default bar-button-default-md bar-button-menutoggle bar-button-menutoggle-md" ng-reflect-menu-toggle="" style="transition: none;">
    <span class="button-inner">
        <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 52.4 44.1" style="enable-background:new 0 0 52.4 44.1;" xml:space="preserve">
            <style type="text/css">
                .ic_menu .st0{fill:#444444;}
            </style>
            <g class="ic_menu">
                <g transform="translate(312, 312)">
                    <path class="st0" d="M-259.6-312H-312v6.4h52.4V-312z"/>
                </g>
                <g transform="translate(312, 312)">
                    <path class="st0" d="M-259.6-293.1H-312v6.4h52.4V-293.1z"/>
                </g>
                <g transform="translate(312, 312)">
                    <path class="st0" d="M-259.6-274.3H-312v6.4h52.4V-274.3z"/>
                </g>
            </g>
        </svg>
    </span>
    <div class="button-effect">
    </div>
</button>
0
Nenroz 14 November 2017, 18:44

1 menjawab

Jawaban Terbaik

Saya menemukan solusi hanya dengan mengganti <button ion-button ...></button> dengan div :

<div class="CustomClass" menuToggle>
    <i svg-icon="menu"></i>
</div>
0
Nenroz 14 November 2017, 18:13