Question

我正在写一个简单的组件＆＃34; special-div＆＃34;在我的标记中可能看起来如下......

<special-div>
   <img src="logo.jpg" />
   <div>This is some random markup</div>
   <p>Anything could be inside the special div</p>
</special-div>

我希望捕获组件标记内的所有内容，并在我的组件模板中重用这些元素。让我们说我的组件只是成为一个带有一些标题文本的div ..它最基本的就是这样做..

<special-div></special-div>

会产生......

<div>
    <p>I am a special div</p>
</div>

..我无法弄清楚如何做的是获取原始元素，以便它们也可以出现在我的新模板中。实施例...

<special-div>
   <img src="logo.jpg" />
   <div>This is some random markup</div>
   <p>Anything could be inside the special div</p>
</special-div>

.. ..成为

<div>
   <p>I am a special div</p>

   <img src="logo.jpg" />
   <div>This is some random markup</div>
   <p>Anything could be inside the special div</p>
</div>

Answer 1

通过名为内容投影（从AngularJS中已知的 transclusion 重命名），可以实现实现目标的方法。

Baiscally，就像你在模板中留下一个“洞”，你可以从外面填写。

您的SpecialDivComponent会有模板，例如以下内容。

<p>I'm special because I always have this tag!</p>
<ng-content></ng-content>

你会像这样使用这个组件。

<special-div>
  <p>Hello there!</p>
  <b>Nice to meet ya!</b>
</special-div>

结果将是以下标记。

<special-div>
  <p>I'm special because I always have this tag!</p>
  <p>Hello there!</p>
  <b>Nice to meet ya!</b>
</special-div>

如何获取组件的原始内部元素

1 个答案: