title: Transclude content containing more content to translude in a child component
body: <p>I have a wrapper component, which wraps its content with a header.<br>
  I'm using 2 different <code>ng-content</code> components with 2 different selectors in order to transclude some content into the bordered area, and some content into the header line (actions, etc.).</p>
  
  <p>The <code>wrapper.component.html</code> code looks something like this:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;ng-content select=".header"&gt;&lt;/ng-content&gt;
      &lt;ng-content select=".body"&gt;&lt;/ng-content&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have a component (let's call it <code>parent</code>) using the wrapper, which hosts another component (let's call it <code>child</code>) from which I'd also like to transclude content into the header line of the wrapper.  </p>
  
  <p>The <code>parent.component.html</code> code looks something like this:</p>
  
  <pre><code>&lt;div class="parent"&gt;
      &lt;wrapper&gt;
          &lt;div class="header"&gt;    
              &lt;a href="#"&gt;Action 1&lt;/a&gt;
              &lt;a href="#"&gt;Action 2&lt;/a&gt;
              &lt;a href="#"&gt;Action 3&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="body"&gt;
              Some content
              &lt;child&gt;&lt;/child&gt;
          &lt;/div&gt;
      &lt;/wrapper&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And, lastly, the <code>child.component.html</code> looks something like this:</p>
  
  <pre><code>&lt;div class="child header"&gt;
      &lt;a href="#"&gt;Action 4&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is not working, meaning that the anchor element for Action 4 is not included in the header area, but rather is left inside the child element's node.<br>
  I tried using the <code>ngProjectAs</code> attribute, but to no avail.</p>
  
  <p>Is there any way to accomplish this without resorting to dynamic components (e.g. ng-template and the likes) ?</p>