删除由角度组件创建的主机HTML元素选择器

在角度2中,svg-rect是一个创建rect的组件,如下所示,

但由于创建了特殊元素标签,因此不会呈现rect.如果删除了svg-rect标签,则会呈现rect

在Angular 1.x中,有替换:'true',它用编译的输出删除指令标记.我们可以在angular2中实现相同的功能吗？

1> Bhavik..：

---

另一种删除我使用的组件主机的方法.

指示 remove-host

//remove the host of avatar to be rendered as svg
@Directive({
    selector: '[remove-host]'
})
class RemoveHost {
    constructor(private el: ElementRef) {
    }

    //wait for the component to render completely
    ngOnInit() {
        var nativeElement: HTMLElement = this.el.nativeElement,
            parentElement: HTMLElement = nativeElement.parentElement;
        // move all children out of the element
        while (nativeElement.firstChild) {
            parentElement.insertBefore(nativeElement.firstChild, nativeElement);
        }
        // remove the empty element(the host)
        parentElement.removeChild(nativeElement);
    }
}

使用此指令;

在remove-host指令中,所有子节点nativeElement都插入到主机之前,然后删除主机元素.

示例示例Gist
根据用例,可能存在一些性能问题.

2> John C..：

---

而不是试图摆脱主机元素,把它变成一个有效的SVG,但其他明智的不受影响:而不是你的元素选择器

selector: "svg-rect"

及其在模板中的相应元素:

template: `.........`

切换到属性选择器:

selector: "[svg-rect]"

并将该属性添加到组元素标记:

template: `.........`

这将扩展到:

这是有效的SVG,它将呈现. Plnkr

---

@David - 您不会在手册中找到它,但是为了向您保证它是幸运的:以下是用户提出的情况:有时(svg和table)需要使用属性选择器来修改结构: https://github.com/angular/angular/issues/11280.作为回应,这里添加了(好的,恢复的)功能:https://github.com/angular/angular/pull/11808.

3> Timathon..：

---

还有另一种方法,我们可以从组件中获取组件的模板.
首先,我们创建组件,我们希望从浏览器渲染中删除其标记(我们不会尝试在此处删除标记.)

@Component({
  selector: 'tl-no-tag',
  template: `
    `,
  styleUrls: []
})
export class TlNoTagComponent {
  @ViewChild('tmp') tmp: any;
  value = 5;
}

然后,在另一个组件的模板中,我们写道:

然后,我们在浏览器中有这样的事情:

5

所以,我们已经

{{value}}

退出了TlNoTagComponent.将继续存在,但不会阻止任何CSS或svg-thing.