如何实现 Angular 2 内容包装指令（如 jQuery 的 wrapInner）答案

【问题标题】：How to Implement an Angular 2 content wrapper Directive (like jQuery's wrapInner)如何实现 Angular 2 内容包装指令（如 jQuery 的 wrapInner）
【发布时间】：2017-06-06 12:22:36
【问题描述】：

我想实现一个 Angular 2 指令，其行为类似于 jQuery's wrapInner method。
我正在编写的库将仅使用 Angular 2+（无 jQuery）。

基本上，该指令将获取已应用的元素或组件的内容，并将该内容包装在 div 中（或者可能将其包装在作为参数传入的其他 html 标记中）

例如，

<myComponent wrapInner>
   ... All The Content ...
</myComponent>

应该会产生类似的结果，

<myComponent >
   <div class="innerStyles" >
      ... All The Content ...
   </div>
</myComponent>

我不确定最有角度的“惯用”方法是什么，因为它似乎涉及操纵discouraged 的DOM。

那么这可能是一个结构指令更好的东西吗？还是涉及以某种方式操纵templates 或使用ViewContainer？我不知道如何使用这些。

但是，我已经组装了一个 plunker，我使用 (discouraged) 不安全和低效的方式来解决这个问题；通过ElementRef 操作DOM。

https://plnkr.co/edit/PyVyzv3KUQ8IcsdNnVt0

请提供帮助。
我真的很感激！

【问题讨论】：

忽略ElementRef 是不安全的。使用 jQuery 并没有更不安全。 “不会自动保护您免受安全漏洞的影响”意味着您不会自动受到 Angular 的保护。如果您注意不要自己做会导致安全问题的事情，那么它是非常安全的。
不仅仅是安全问题......在我的 plunker 中，我发现我必须手动循环并添加每个孩子、孙子、曾孙......各种节点......如果他们的多层嵌套节点这将成为我想象的效率噩梦
Angular2 没有提供任何东西。你可以搜索一下是否有一些 JS 方法可以让它变得更简单。

标签： angular angular2-directives wrapinner

【解决方案1】：

我认为没有直接的 DOM 操作就可以做到这一点。

要完成这项工作，您需要一个组件并像这样使用它

<myComponent wrapInner>
  <wrap-inner>
   ... All The Content ...
  </wrapInnter>
</myComponent>

但是没有办法摆脱包装部分周围的<wrap-inner> (<div class="innerStyles" >)

【讨论】：

感谢君特的快速反馈。 wrapInner 只能是一个指令（可能是一个结构性指令）..如果我可以使用组件，那么我将只使用 ng-content ，这将非常简单......我想要做的基本上是模仿指令中的 ng-content 功能
如果你想使用指令，你会被你已经在使用的方法所困。
嗯..这很令人惊讶。我的想法是，如果 Component 装饰器继承 Directive 装饰器，并且 Component 以某种方式具有 ng-content 功能（即使它本身不是指令），那么在最坏的情况下，它应该可以基本上编写自己的 ng -content 类型的东西，只适用于指令......因为它是为组件指令编写的......这有意义吗？
不确定您的意思？我的意思是<myComponent> <div *wrapInner> ... All The Content ...</div> </myComponent>。 <div> 可以是“All The Content”最外层元素的任何其他元素。
哦，我不知道每个元素只能有一个 sDirective.. 谢谢.. 我会考虑你的想法，将 div 包装在里面并在那里放置一个结构指令......

【解决方案2】：

目前不可能。但是 Angular 团队在 backlog 中有这个功能。

您可以通过https://github.com/angular/angular/issues/8785关注进度

【讨论】：