如何从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）。

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

Answer 1

根据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属性一起使用，并且可以和所有的指令（ *ngFor ， ngModel ，…）一起使用，Angular风格指南也提到了这个方法。

Answer 2

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

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

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

• 属性指令 – 请参阅https://angular.io/docs/ts/latest/guide/attribute-directives.html
• 结构指令 – 请参阅https://angular.io/docs/ts/latest/guide/structural-directives.html

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