如何从HTML中删除/replaceangular2组件的select器标签

我开始使用angular2(版本2.0.0-alpha.46),我创build了几个组件,当使用下面的代码创buildangular2组件

打字稿

import {ComponentMetadata as Component, ViewMetadata as View} from 'angular2/angular2'; @Component({ selector: 'my-component' }) @View({ template: '<div class="myClass">Hello My component</div>' }) export class MyCompoent{ constructor() { console.info('My Component Mounted Successfully'); } } 

HTML

 <my-component></my-component> 

它工作正常,但是当我做一个检查元素,我可以看到一个标签生成

输出HTML

 <my-component> <div>Hello My component</div> <my-component> 

问题

它将<my-component>标签保留在HTML中,并且我的一些CSS不能按预期工作。

那么他们是如何去除标签<my-component>呢? 类似于angular度1.x(在指令中replace为true)。

任何帮助将不胜感激..!

根据https://github.com/angular/angular/issues/3866,Replace在AngularJS 1.x中被弃用,因为它似乎不是一个好主意。

作为一种解决方法,您可以在组件中使用属性select器

 selector: '[my-component]' 

然后像使用它

 <div my-component>Hello My component</div> 

[my-component] ,然后像<div my-component>Hello My component</div>那样使用它,但是现在在Angular2中首选AFAIk camelCase。

暗示

指令select器应该是camelCase而不是蛇形的。 Snake-case仅用于元素select器,因为-是自定义元素所必需的。 Angular并不依赖于组件是自定义元素,但无论如何,遵守这个规则被认为是一个好习惯。 Angular可以和camelCase属性一起使用,并且可以和所有的指令( *ngForngModel ,…)一起使用,Angular风格指南也提到了这个方法。

引用Angular 1到Angular 2升级策略doc :

Angular 2中不支持replace其主机元素的指令(取代:Angular 1中的true指令)。在很多情况下,这些指令可以升级到常规的组件指令。

事实上,这取决于你想要做什么,你需要知道,Angular2支持几件事情:

根据你想要做什么,你可以select不同的方法。 对于你简单的例子,似乎@Günter解决scheme是更好的;-)