Question

我正在尝试将svg元素（使用http.get（）请求）插入到组件“图标”中。

export class BgIcon {
  private svgSrc_: string;
  icon_: Icon;

  @Input('svg-src')
  set svgSrc(value: string) {
    this.svgSrc_ = value;
    this.icon_ = this.iconService.getIcon('cake.svg');
    this.adapter_.setInnerHTML(this.elementRef_.nativeElement, this.icon_.svg);
  }

  get svgSrc(): string {
    return this.svgSrc_;
  }

  constructor(private elementRef_: ElementRef,
    private renderer_: Renderer,
    public iconService: IconService,
    private adapter_: BrowserDomAdapter) {
  }
}

IconService返回一个缓存对象，svg将完整的svg-element作为字符串。我可以用上面的方法制作svg。但我不知道这是不是正确的angular2'ish。

有没有更好的方法来完成这项任务？

Answer 1

我不确定这是否是一种更好，更有棱角的方式。但我使用@HostBinding()来做到这一点。这导致如下：

@Directive({
    selector: 'bg-icon'
})
export class IconComponent {

    @Input() public svgSrc : string;

    @HostBinding('innerHtml') public svg : string = '';

    constructor(public iconService: IconService) {}

    ngOnInit() {
       this.svg = this.iconService.getIcon(this.svgSrc).svg;
    }

}

将SVG插入组件

1 个答案: