从HTML中删除/替换组件的选择器标签

Question

我开始使用Angular 2（版本2.0.0-alpha.46）并创建了一些组件。

在用以下代码创建组件时：

Typescript：

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>

它工作得很好，但是当我执行 Inspect element 时，我可以看到生成了一个像这样的标签：

输出HTML

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

问题

在HTML中保留了<my-component>标记，我的某些CSS效果不符合预期。

问题

是否有一种类似于Angular 1中指令的replace: true的方法可以删除<my-component>标记？

- powercoder23

---

只作参考，这个问题已经被提出至少3次了：1, 2, 3。 - Mark Rajcok

重复项仅突出了需要此功能的各种情况。正如这个问题所指出的那样，由于这个原因，CSS库与Angular一起无法按预期工作。 - Karma

Answer 1

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

作为解决办法，您可以在组件中使用属性选择器，例如：

selector: '[my-component]'

这是一个空的HTML段落标签，其中包含一个被删除线标记。

selector: '[myComponent]'

然后像这样使用它

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

（删除线）

<div myComponent>Hello My component</div>

提示

指令选择器应该使用驼峰命名法而不是蛇形命名法。 蛇形命名法只用于元素选择器，因为自定义元素需要 -，而 Angular 并不依赖组件是自定义元素，但遵循这个规则被认为是良好的实践。 Angular 对于驼峰属性也能正常工作，并将其用于所有指令（如 *ngFor, ngModel 等），这也是 Angular 样式指南建议的做法。

- Günter Zöchbauer

---

组件选择器的首选样式不是camelCase。请参见[Style 05-02]（https://angular.io/docs/ts/latest/guide/style-guide.html#05-02） 。 - freethebees

这仅适用于标记名称。对于属性选择器，没有理由不使用camelCase。他们也更喜欢使用camelCase名称作为标记选择器，但这将无法匹配WebComponents命名风格，其中名称中需要使用“-”。这虽然不会造成太大的影响，因为Angular不依赖于WebComponents功能。唯一的小区别是没有“-”的标记继承自HTMLUnknownElement而不是HTMLElement。另请参见http://www.html5rocks.com/en/tutorials/webcomponents/customelements/#upgrades - Günter Zöchbauer

根据Angular 2的样式指南05-03建议避免这种情况，具体请参考https://angular.io/docs/ts/latest/guide/style-guide.html#!#05-03。 - Logan H

当然，有些情况下这是必须的。否则，你怎么能将<tr>或<li>转换为组件呢？毕竟其他标签名称都不支持。 - Günter Zöchbauer

我在想是否可以用<ng-container myComponent>来模拟AngularJS的replace功能。我还没有尝试过。 - Alexander Taylor

Answer 2

引用来自Angular 1 to Angular 2 Upgrade Strategy doc的话：

在Angular 2中，不支持替换其宿主元素的指令（即Angular 1中replace: true指令）。在许多情况下，这些指令可以升级为常规组件指令。

事实上，这取决于您想要做什么，您需要知道Angular2支持以下几种方式：

• 属性指令 - 参见https://angular.io/guide/attribute-directives
• 结构型指令 - 参见https://angular.io/guide/structural-directives

根据您想要做的事情，您可以选择不同的方法。对于您的简单示例，@Günter 的解决方案似乎更好 ;-)

- Thierry Templier