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

Question

我开始使用Angular 2(版本2.0.0-alpha.46)并创建一些组件.

使用以下代码创建组件时:

打字稿:

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>

问题

它将<my-component>标记保存在HTML中,并且我的一些CSS没有按预期工作.

题

有没有办法删除<my-component>类似于角1 的标签(replace: true在指令中)？

Answer 1

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

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

selector: '[my-component]'

selector: '[myComponent]'

然后像使用它一样

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

<div myComponent>Hello My component</div>

暗示

指令选择器应该是camelCase而不是snake-case.Snake-case仅用于元素选择器,因为-自定义元素需要它.Angular不依赖于作为自定义元素的组件,但无论如何,遵循此规则被认为是良好的做法.细跟驼峰属性角的作品,并使用他们所有的指令(*ngFor,ngModel,...),并且也由角风格指南建议.

Answer 2

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

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

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

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

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