Angular8 создает компонент dymanically как прямой потомок mat-extension-panel-header - PullRequest
Новая
       6

Angular8 создает компонент dymanically как прямой потомок mat-extension-panel-header

0 голосов
/ 23 октября 2019

Я хочу добавить два HTML-элемента слева и справа от элемента <mat-expansion-panel-header>, который находится внутри <mat-expansion-panel>. Если я добавлю элементы (<my-html-element>) непосредственно в шаблон HTML, они автоматически вставляются в <span class="mat-content">..., который динамически генерируется angular и содержит все, что было определено в <mat-expansion-panel-header></mat-expansion-panel-header> в шаблоне.

Шаблон: 

<mat-expansion-panel>
        <mat-expansion-panel-header>
            <my-html-element></my-html-element>        <===============
            <mat-panel-title>
                <div class="title">
                    Hello World
                </div>
            </mat-panel-title>
            <my-html-element></my-html-element>        <===============
        </mat-expansion-panel-header>
...
</mat-expansion-panel>

Отображается в браузере, Angular создает его следующим образом: 

</mat-expansion-panel>
<mat-expansion-panel-header>
    <span class="mat-content">
        <mat-panel-title ...>
            <div ... class="title"> Hello World </div>
        </mat-panel-title>
        <my-html-element></my-html-element>        <===============
        <my-html-element></my-html-element>        <===============
    </span>

    <span class="mat-expansion-indicator ...></span>
</mat-expansion-panel-header>
</mat-expansion-panel>

Мои элементы отображаются в середине заголовка, а не на желаемых границах,Результат должен выглядеть следующим образом: 

</mat-expansion-panel>
<mat-expansion-panel-header>
   <my-html-element></my-html-element>        <===============
    <span class="mat-content">
        <mat-panel-title ...>
            <div ... class="title"> Hello World </div>
        </mat-panel-title>
    </span>

    <span class="mat-expansion-indicator ...></span>
    <my-html-element></my-html-element>        <===============
</mat-expansion-panel-header>
</mat-expansion-panel>

Я уже пытался получить доступ к заголовку панели расширения, используя @ViewChild (в коде ниже expansionHeader) и пытаясь динамически создавать свои компоненты следующим образом: 

ngAfterViewInit(): void {
    const factory = this.factoryResolver.resolveComponentFactory(MyHtmlElement);
    const reference = this.expansionHeader.createComponent(factory);
}

Однако, используя этот код, компоненты добавляются в заголовок панели расширения как родные элементы, а не как его прямые потомки, как я бы этого хотел.

Моя проблемав том, что я не могу получить доступ к прямому потомку <mat-expansion-panel-header>, используя @ViewChild, потому что они генерируются динамически. Если бы я мог получить доступ к прямому потомку, я мог бы добавить свои компоненты как братьев и сестер к этому потомку ...

Есть ли способ добавить сгенерированные компоненты в качестве прямых потомков mat-expansion-panel-header, один из них самый первыйа один как самый последний ребенок?

...