DOM中不带选择器标记的Angular2组件

对于Angular2，有没有一种方法可以在DOM中不显示选择器的情况下通过选择器调用组件

我的问题是我想用SVG渲染在Angular2中制作一个游戏。我有一个匹配组件（我的主匹配容器），它调用一个字段组件（绘制字段）。我的匹配组件是一个SVG元素，字段是一个SVG Rect元素

这是我的匹配组件：

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'match',
    template: `
        <svg:svg width="800" height="600" style="background-color:purple;">
            <field></field>
        </svg:svg>
    `
})
export class MatchComponent implements OnInit {

    constructor() {
    }

    ngOnInit() {
    }
}

从'@angular/core'导入{Component，OnInit}；
@组成部分({
选择器：“匹配”，
模板：`
`
})
导出类MatchComponent实现OnInit{
构造函数（）{
}
恩戈尼尼特（）{
}
}

和我的字段组件：

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'field',
    template: `
        <svg:rect width="600" height="300" fill="yellow"></svg:rect>
    `
})
export class TerrainComponent implements OnInit {

    constructor() {
    }

    ngOnInit() {
    }

}

从'@angular/core'导入{Component，OnInit}；
@组成部分({
选择器：'字段'，
模板：`
`
})
导出类TerraUncomponent实现OnInit{
构造函数（）{
}
恩戈尼尼特（）{
}
}

当我启动解决方案时，它工作正常，但SVG与我想要的不一样，因为DOM中有一个元素破坏了SVG：

<match>
        <svg height="600" style="background-color:purple;" width="800">
            <field>
        <rect fill="yellow" height="300" width="600"></rect>
    </field>
        </svg>
    </match>

您知道是否可以在结果DOM中不使用选择器？或者，有没有更好的方法来使用Angular 2生成SVG

---

编辑：我发现了一个使用SVG组的解决方案，但我认为这不是最好的解决方案，我更希望在DOM中没有选择器标记

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'match',
    template: `
        <svg:svg width="800" height="600" style="background-color:purple;">
            <g field></g>
        </svg:svg>
    `
})
export class MatchComponent implements OnInit {

    constructor() {
    }

    ngOnInit() {
    }
}

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'g[field]',
    template: `
        <svg:rect width="600" height="300" fill="yellow"></svg:rect>
    `
})
export class TerrainComponent implements OnInit {

    constructor() {
    }

    ngOnInit() {
    }

}

从'@angular/core'导入{Component，OnInit}；
@组成部分({
选择器：“匹配”，
模板：`
`
})
导出类MatchComponent实现OnInit{
构造函数（）{
}
恩戈尼尼特（）{
}
}
从“@angular/core”导入{Component，OnInit}；
@组成部分({
选择器：“g[字段]”，
模板：`
`
})
导出类TerraUncomponent实现OnInit{
构造函数（）{
}
恩戈尼尼特（）{
}
}

它正在呈现此SVG，工作人员：

<match>
        <svg height="600" style="background-color:purple;" width="800">
            <g field="">
        <rect fill="yellow" height="300" width="600"></rect>
    </g>
        </svg>
    </match>

---

您只需使用CSS即可解决此问题，只需将

match

设置为

display:contents

匹配{
显示：内容；
}

---

正如

display:contents

中所述，这会使组件看起来好像是元素父元素的直接子元素。

有关信息，我已经阅读了这个问题和这个答案，但我无法应用相同的解决方案，我也一直在尝试找出在框架中这是否可行。如果你遇到一个答案，请让每个人都知道。