Как отобразить содержимое вложенной панели третьего или более уровней в панели расширения с помощью угловых хуков жизненного цикла - PullRequest
Новая
       7

Как отобразить содержимое вложенной панели третьего или более уровней в панели расширения с помощью угловых хуков жизненного цикла

0 голосов
/ 24 апреля 2018

Я оборачиваю компонент угловой панели расширения материала в угловой 5. Он отлично работает с панелями первого и второго уровня, то есть с вложенной панелью, содержимое внутри вложенной панели второго уровня визуализируется с использованием углового хука жизненного цикла AfterViewInit. Контент первого уровня визуализируется с использованием OnInit. Я использую ngTemplateOutlet для отображения шаблона в качестве содержимого панели.

Но я столкнулся с проблемой рендеринга содержимого вложенных панелей третьего уровня, это не рендеринг содержимого вложенных панелей третьего или даже более уровней. Я пытался с AfterContentInit, но не работает.

ссылка на стек панель расширения .

Есть ли способ решить эту проблему?

1 Ответ

0 голосов
/ 25 апреля 2018

Вы добавили шаблоны MultiplenestedPanel во вложенные компоненты <expansion>, поэтому родительский компонент <my-app> больше не может их видеть. Переместите шаблоны за пределы основной структуры DOM <my-app>, чтобы к ним можно было получить доступ AppComponent: 

<expansion [panels]="panelSettings.panels">
    <ng-template #nestedPanels>
        <expansion [panels]="nestedPanelSettings.panels">
            <ng-template #nestedPanelIntegrity>
                <p>
                    We build trust through making and keeping commitments.
                </p>
            </ng-template>
            <ng-template #nestedPanelAgility>
                <p>
                    We act quickly, decisively and pursue the fastest course to accurate solutions. We take calculated risks.
                </p>
            </ng-template>
            <ng-template #nestedPanelInnovation>
                <!--<p>
                    We constantly stretch ourselves to efficiently achieve the best results. Our curiosity leads us to solve problems.
                </p>-->
                <expansion [panels]="multiplePanelSettings.panels">
                </expansion>
            </ng-template>
        </expansion>
    </ng-template>
</expansion>

<ng-template #MultiplenestedPanel>
    <p>
        Third level nestedPanel1
    </p>
</ng-template>
<ng-template #MultiplenestedPanel1>
    <p>
        Third level nestedPanel2
    </p>
</ng-template>
...