按钮组件中的自定义 SVG 指令

Question

我创建了一个可以添加到<i>标签中的简单Directive：

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

它采用SVG文件的名称(在示例中：menu.svg (。无论我在哪里使用它，它都可以完美运行，图标正确显示，除了在<button> Component内：

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

在此上下文中，不显示图标。

以下是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);
        });
    }
}

DOM在标签内渲染<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>

Answer 1

我通过简单地用div替换<button ion-button ...></button>找到了解决方案：

<div class="CustomClass" menuToggle>
    <i svg-icon="menu"></i>
</div>