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

我想实现一个Angular 2指令，其行为如下。
我正在编写的库将只使用angular 2+（没有jQuery）

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

比如说,

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

... 所有的内容。。。

结果应该是

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

... 所有的内容。。。

我不确定最具角度风格的“惯用”方法是什么，因为它似乎涉及到操作正在使用的DOM

那么，这可能是一个更好的结构指令吗？或者以某种方式操纵或使用？我不知道如何使用这些

然而，我已经准备好了一个plunker，在这里我使用（）不安全和低效的方式来处理这个问题；通过操作DOM

请帮忙。

---

我真的很感激

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

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

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

... 所有的内容。。。

---

但是没有办法摆脱包装部分周围的

（

）

目前不可能。 但是Angular团队在backlog上有这个特性

---

您可以在

上跟踪进度，只需忽略

ElementRef

是不安全的。使用jQuery并不比使用jQuery更不安全。“不自动保护您免受安全漏洞的影响”意味着您不会自动受到保护。如果你注意自己没有做会导致安全问题的事情，那么它是完全安全的。不仅仅是安全问题。。。在我的plunker中，我发现我必须手动循环并添加每个孩子，孙子，孙子。。各种节点。。如果他们有几层嵌套的节点，这将成为我想象中的效率噩梦Angular2什么都不提供。您可以搜索是否有一些JS方法使其更简单。感谢您的快速反馈。wrapInner只能是一个指令（可能是一个结构指令）。。如果我可以使用组件，那么我只会使用ng内容，这将非常简单。。。我想做的是在一个指令中模拟ng内容功能如果你想使用一个指令，你会被你已经在使用的方法卡住。嗯。。这真令人惊讶。我的想法是这样的，如果组件decorator继承了指令decorator，并且组件以某种方式具有ng内容特性（即使它本身不是一个指令），那么在最坏的情况下，它应该可以基本上编写自己的ng内容类型，与指令排他地工作。。。因为其中一个是为组件指令编写的。。这有意义吗？不知道你的意思？我的意思是

。。。所有的内容。
可以是“所有内容”中最外层的任何其他元素。哦，我不知道每个元素只能有一个SDirect。。谢谢我会考虑你的想法，将div包装在里面，并在那里放置一个结构指令。。。