Transclude контент, содержащий больше контента для включения в дочерний компонент - PullRequest
Новая
       35

Transclude контент, содержащий больше контента для включения в дочерний компонент

1 голос
/ 20 марта 2019

У меня есть компонент-оболочка, который оборачивает свое содержимое заголовком.
Я использую 2 разных компонента ng-content с 2 разными селекторами, чтобы включить некоторый контент в ограниченную область, а другой - в строку заголовка (действия и т. Д.).

Код wrapper.component.html выглядит примерно так: 

<div class="wrapper">
    <ng-content select=".header"></ng-content>
    <ng-content select=".body"></ng-content>
</div>

У меня есть компонент (назовем его parent), использующий обертку, в которой находится другой компонент (назовем его child), из которого я также хотел бы включить содержимое в строку заголовка обертки.

Код parent.component.html выглядит примерно так: 

<div class="parent">
    <wrapper>
        <div class="header">    
            <a href="#">Action 1</a>
            <a href="#">Action 2</a>
            <a href="#">Action 3</a>
        </div>
        <div class="body">
            Some content
            <child></child>
        </div>
    </wrapper>
</div>

И, наконец, child.component.html выглядит примерно так: 

<div class="child header">
    <a href="#">Action 4</a>
</div>

Это не работает, это означает, что элемент привязки для Action 4 не включен в область заголовка, а скорее остается внутри узла дочернего элемента.
Я пытался использовать атрибут ngProjectAs, но безрезультатно.

Есть ли способ сделать это, не прибегая к динамическим компонентам (например, ng-template и тому подобное)?

...