Angular Component:没有模板替换选项?

2022-01-21 00:00:00 replace angularjs javascript components

新的 AngularJS 1.5 组件概念中似乎没有替换"选项(例如它用于指令).

如果我想将 table row <TR> 元素作为组件,你有什么建议?就有效的 HTML 而言是不可能的吗?

真实示例:邮箱组件内部有邮件组件.通过标记mail-box-component是table,mail-box是tr.

<邮箱><mail ng-repeat="mail in $ctrl.mails" mail="mail"></mail><邮箱>

<小时>

UPD:关于指令的相关讨论 - 为什么要替换在 AngularJS 中已弃用?

解决方案

自从 replace: true 标志已被弃用后,这不再是可能的角度方式了

为什么 AngularJS 不推荐使用 replace?p>

replace: true 标志提出的问题多于解决方案,这就是它被删除的原因.因此,您不能再以这种方式构建指令并提供有效的 table-tr-td 标记.

然而,这并没有看起来那么糟糕,有两个原因:

  1. 你可以做任何你想做的事情,而无需 table、tr、td 等.只需使用 div、span 等元素以及一些 css 就可以了

  2. web-components(和指令是第一次尝试模拟它们)并不意味着代表标记的这些小片段.实际上,它们更多地被认为是一个功能齐全的组件做某事.所以无论你想用你的 tr 做什么认为值得围绕它建立一个元素指令,它可能不是.

也许,您可以使用属性指令来代替:

<tr my-mail-directive></tr>

而您的 my-mail-directive 对 tr 元素具有魔力

It looks like there is no "replace" option in new AngularJS 1.5 Component concept (like it was for directives).

What would you suggest if I want to have table row <TR> element as component? Is it not possible in terms of valid HTML?

Real example: mailBox component has mail components inside. By markup mail-box-component is table, and mail-box is tr.

<mail-box>
    <mail ng-repeat="mail in $ctrl.mails" mail="mail"></mail>
<mail-box>


UPD: related discussion about directives - Why is replace deprecated in AngularJS?

解决方案

This is not possible the-angular-way anymore since the replace: true flag has been deprecated

Why is replace deprecated in AngularJS?

the replace: true flag had come up with more problems than solutions which is why it was removed. therefore you can not build directives in such a way anymore and provide valid table-tr-td markup.

However, there are two reasons why this is not as bad as it looks:

  1. you can do everything you want to do without table, tr, td, etc. just using elements like div, span, etc. and some css on it

  2. web-components (and directives were a first attempt to simulate them) are not meant to represent such small fragments of the markup. they are more thought of as a fully functional component actually doing something. so whatever you want to do with your tr that you think it's worth building an element-directive around it, it probably isnt.

Maybe, what you can do is using an attribute-directive instead:

<tr my-mail-directive></tr>

and your my-mail-directive does the magic on the tr element

相关文章