将组件替换为其内容-angular 2

replace component with its content - angular 2

本文关键字：-angular 组件 替换      更新时间：2023-09-26

我正在寻找一种方法，使组件只与其内容一起呈现。例如，给定组件：

@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相对较新（刚刚进行了测试）-谷歌没有那么大帮助，更不用说目前的文档有多缺乏了。

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

自字母52 以来，属性必须使用camelCasing

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

用这个来称呼它：

<div myCmp></div>

您可以执行以下操作：

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

以及在您的HTML:中

 <div class="my-cmp" />

根据角度1.x 的文档

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

所以我认为这个功能将不可用，因为angular 2

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

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

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

相关文章：