有没有一种方法，使用Angular2，通过选择器调用组件，而DOM中没有这个选择器？

我的问题是我想在Angular2中使用SVG渲染制作游戏 . 我有一个匹配组件（我的主匹配容器），他调用一个字段组件（谁绘制字段） . 我的匹配组件是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() {
    }
}

而我的现场组件：

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() {
    }

}

当我启动我的解决方案时，它正在工作，但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>

你知道是否有可能使用选择器whitout在结果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() {
    }

}

它正在渲染这个SVG，谁工作：

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