Question

是否有一种方法，使用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>

Answer 1

您只能通过使用CSS来解决此问题，只需将match设置为display: contents，

    match {
        display: contents;
    }

如display: contents documentation所述，这使得该组件看起来好像是该元素的父级的直接子级。

DOM中没有选择器标记的Angular2组件

1 个答案: