用其内容替换组件 - 角度2

Question

我正在寻找一种方法来获得仅使用其内容呈现的组件。例如，给定组件：

@Component({selector: 'my-cmp', template: '<div> my-cmp </div>'})
class MyComponent {
}

使用angular2渲染它会将以下内容添加到DOM：

<my-cmp>
    <div> my-cmp </div>
</my-cmp>

虽然我想找到一种直接渲染方式：

<div> my-cmp </div>

可悲的是，因为角度2相对较新（只是测试版） - 谷歌不是那么有用，更不用说目前的文档是多么缺乏..

Answer 1

使用属性选择器

可以实现相同的排序

自alpha.52

以来，属性必须使用camelCasing

@Component({
     selector: '[myCmp]', //attribute selector
     template: 'my-cmp'
})
class MyComponent {
}

用这个来称呼它：

<div myCmp></div>

Answer 2

您可以做以下事情：

@Component({selector: 'div.my-cmp', template: 'my-cmp'})
class MyComponent {
}

并在您的HTML中：

 <div class="my-cmp" />

Answer 3

根据角度1.x的documentation

  

替换指令的元素本身（如果replace为true -   建议使用）。

所以我认为这个功能将无法使用角度2

Answer 4

我记得几年前为Angularjs问了一个类似的问题。当时的共识似乎是，现在可能是你可能不想这样做。

它打破了语义：<video/>或<input/>不会分解为其内容。你的Angular组件也不应该。

你可以通过更深入地思考你的标记/ CSS来实现你想要的目标吗？也许如果你充实了你的用例，我们可能会给你一个替代方案吗？