javascript - AngularJS 组件可以修改其包装元素吗？

Question

我喜欢将 Angular 组件视为元素指令。给定一个名为 hero 的组件，我可以在父模板中使用它，如下所示:

<hero myparam="something"></hero>

我想使用 hero 元素作为组件管理的容器，由组件负责整个元素。

预期

以下是我希望从上面的绑定(bind)中得到的内容:

<hero id="component123" class="alien" custom="foo">text</hero>

我的自定义组件会转换给定元素并根据需要使用它。

实际

但是，该组件似乎只能在英雄元素内部渲染其模板。我能得到的最好的是:

<hero myparam="something">
    <div id="component123" class="alien" custom="foo">
        text
    </div>
</hero>

我觉得这很糟糕，因为英雄元素实际上并不是英雄，而只是实际英雄的包装。这会混淆语义并创建不需要的额外元素。

Angular 中使用组件作为纯包装并将实际组件放入其中是最佳实践吗？

这是一个可以使用的官方示例: https://plnkr.co/edit/NKjCDS8OEngYHNrBmC5O?p=preview

Answer 1

I like to think of Angular components as element directives.

组件可以被认为是一种更新模板的特殊指令。如果要更改属性，请使用实际指令(属性指令)

My custom component transforms the given element and uses it as it sees fit.

当您谈论转换时，您需要的是指令，而不是组件。