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

Question

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

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

例如，

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

应该会产生类似的东西，

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

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

那么这可能是最好的结构指令吗？或者以某种方式操纵templates或使用ViewContainer？我不知道如何使用它们。

然而，我已经把一个使用（discouraged）不安全且效率低下的方式的掠夺者放在一起;通过ElementRef操纵DOM。

  

https://plnkr.co/edit/PyVyzv3KUQ8IcsdNnVt0

请帮助。
我真的很感激！

Answer 1

如果没有直接的DOM操作，我认为没有办法做到这一点。

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

一样使用它

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

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