Question

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

<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

我只需将<button ion-button ...></button>替换为div：

即可找到解决方案

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

按钮Component中的自定义SVG指令

1 个答案: