Возможен ли глубокий нг-контент?

Question

Предположим, я хочу включить такую ​​разметку в ng-content:

<div aaa>
  AAA
</div>
<div aaa bbb>
  BBB
</div>

Для этого я могу использовать селекторы (которые выглядят как обычные CSS):

<ng-content select="div[aaa]"></ng-content>
----- some other content here -----
<ng-content select="div[aaa][bbb]"></ng-content>

Но что, если у меня есть этот контент (я не могу избавиться от тега 'section'):

<section>
  <div aaa>
    AAA
  </div>
  <div aaa bbb>
    BBB
  </div>
</section>

Какие селекторы я могу использовать, чтобы получить тот же результат? Это не работает для меня:

<ng-content select="section div[aaa]"></ng-content>
----- some other content here -----
<ng-content select="section div[aaa][bbb]"></ng-content>

Ни это:

<ng-content select="section>div[aaa]"></ng-content>
----- some other content here -----
<ng-content select="section>div[aaa][bbb]"></ng-content>

Есть ли обходной путь для этого? Почему селектор не работает как CSS? Это по замыслу? Я не могу найти причину в документах...

Поможет ли тег "section" заменить на "ng-template" или "ng-container"?

Answer 1

Я не верю, что это возможно с нг-контентом.

Есть альтернативы тому, что вы хотите сделать, однако они немного сложнее.

Мой предпочтительный способ сделать это - использовать Angular CDK Portals. Для получения дополнительной информации см.:

• https://material.angular.io/cdk/portal/overview
• https://blog.angularindepth.com/angular-cdk-portals-b02f66dd020c
• https://medium.com/@sumn2u/dynamic-ui-using-portals-in-angular-cdk-6051988b0f81