用它的内容替换组件 - angular 2 [重复]答案

【问题标题】：replace component with its content - angular 2 [duplicate]用它的内容替换组件 - angular 2 [重复]
【发布时间】：2016-03-30 23:32:31
【问题描述】：

我正在寻找一种方法来让组件仅以其内容呈现。例如，给定组件：

@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>

遗憾的是，由于 Angular 2 相对较新（刚刚进入测试版） - Google 并没有太大帮助，更不用说当前文档的缺失程度了..

【问题讨论】：

【解决方案1】：

可以通过使用属性选择器来实现相同的排序

自alpha.52以来，属性必须使用camelCasing

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

并用这个来称呼它：

<div myCmp></div>

【讨论】：

【解决方案2】：

你可以做一些如下的思考：

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

在您的 HTML 中：

 <div class="my-cmp" />

【讨论】：

【解决方案3】：

根据documentation的角度1.x

替换指令的元素本身（如果替换为真 - 已弃用）。

所以我认为这个功能在 angular 2 中不可用

【讨论】：

【解决方案4】：

我记得几年前曾向 Angularjs 提出过类似的问题。当时的共识似乎是，现在可能是你可能不想这样做。

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

您可能仍然可以通过更深入地思考您的标记/css 来实现您想要的？如果您充实您的用例，或许我们可以为您提供替代方案？

【讨论】：