Question

我正在尝试使用角度组件将SVG元素插入DOM中，并且遇到了问题。我的应用程序是显示一个图标工具箱，我可以将其拖到工作区中。图标基于SVG。我不想为每个图标创建一个组件。我将Icon添加到父Component数组，下面的HTML显示了使用app-edge-component插入SVG的循环。以下是父组件的示例HTML。

flow-chart.component.html

<svg id="top_svg" xmlns="http://www.w3.org/2000/svg">
    <g app-edge-component [node]="node" [nodeIndex]="nodeIndex" *ngFor="let node of chart.nodes; let nodeIndex = index" [id]="'NodeGroup-' + nodeIndex">
    </g>
</svg>

下面是我的应用程序边缘组件代码

edge-component.component.ts

import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
import { NodeViewModel } from '../flow-chart/flow-chart.nodeviewmodel';
import { SafeHtml } from '@angular/platform-browser/src/security/dom_sanitization_service';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
    // tslint:disable-next-line:component-selector
    selector: 'g[app-edge-component]',
    templateUrl: 'edge-component.component.html',
    styleUrls: ['edge-component.component.scss']
})

export class EdgeComponentComponent implements OnInit {
    @Input() node
        : NodeViewModel;

    @Input() nodeIndex
    : number;

    @ViewChild('dataContainer') dataContainer: ElementRef;

    svgTemplate: SafeHtml;

    mouseOverNode = null;

    constructor(private sanitizer: DomSanitizer) { }

    ngOnInit() {
        // Try using container
        // this.dataContainer.nativeElement.html = this.sanitizer.bypassSecurityTrustHtml('<svg:circle cx="0" cy="0" r="10"/>');

        // Try using innerHTML on div
        this.svgTemplate = this.sanitizer.bypassSecurityTrustHtml('<svg:circle cx="0" cy="0" r="10"/>');
    }

    onNodeMouseDown(e, nodeIndex) {
    }
}

edge-component.component.html

<!-- <ng-container #dataContainer></ng-container> -->
<div [innerHTML]="svgTemplate" #dataContainer></div>

从上面可以看到，我已经尝试了很多次插入SVG，并且使用[innerHTML]插入 div 最接近，并且DOM显示了 svg：circle 在 div 中，但不会在浏览器中呈现。我不确定svg元素内是否允许使用div，这就是为什么。

Angular-如何通过组件将动态SVG插入DOM

0 个答案: