Angular（6）和d3（v5）：组件作为一个svg中的子元素，并将svg元素传递给每个组件

我使用的是角度6和d3 v5。 我已经用html模板创建了一个Glyph组件

<svg:g #glyph></svg:g>

在父组件中，我可以使用

来显示这一点

---

我想将这个Glyph组件的多个实例添加到同一个svg中，例如，在GlyphList组件中。为了管理

d3

选择、转换和交互，我希望每个单独的组件都是相同

svg

的一部分（或者更好的是，是相同

svg:g

元素的一部分）

例如，假设我正在文件系统上创建一个可视化，Glyph是一个自定义的

svg:g

UI元素，用于可视化特定的文件或文件夹，并且我有一个文件目录，我希望使用GlyphList组件对其进行可视化，所有这些都在同一个

svg

中

---

如何在Angular中执行此操作？即，如何构造模板并启动每个Glyph组件，并在GlyphList组件（或服务？）中传入一个共享的

svg

元素，我可以在每个子组件中使用

d3

进行选择？

检查本教程，在SVG组件和Angular一节中，有一节介绍了如何完全按照您的要求进行操作

以及您的svg组件： 从'@angular/core'导入{Component}

@Component({
    selector: '[lineExample]',
    template: `<svg:line x1="0" y1="0" x2="100" y2="100"></svg:line>`
})
export class LineExampleComponent {
    constructor() {}
}

@组件({
选择器：“[lineExample]”，
模板：``
})
导出类LineExampleComponent{
构造函数（）{}
}

然而，我在这里结束，因为我不能使它工作，Angular给了我这个错误

compiler.js:1021 Uncaught Error: Template parse errors:
Can't bind to 'lineExample' since it isn't a known property of ':svg:g'. ("<svg>
    <g [ERROR ->][lineExample]></g>
</svg>"): ng:///AppModule/TrackComponent.html@1:7

compiler.js:1021未捕获错误：模板分析错误：
无法绑定到“lineExample”，因为它不是“：svg:g”的已知属性。("
][行示例]>
“”：ng:///AppModule/TrackComponent。html@1:7

让我知道如果你让它工作

@Component({
    selector: '[lineExample]',
    template: `<svg:line x1="0" y1="0" x2="100" y2="100"></svg:line>`
})
export class LineExampleComponent {
    constructor() {}
}

compiler.js:1021 Uncaught Error: Template parse errors:
Can't bind to 'lineExample' since it isn't a known property of ':svg:g'. ("<svg>
    <g [ERROR ->][lineExample]></g>
</svg>"): ng:///AppModule/TrackComponent.html@1:7