如何使用角生命周期钩在扩展面板中显示第三或更多级嵌套面板的内容

Question

我正在包装角度的Angular材料扩展面板组件中。角生命周期挂钩后视图。第一级内容正在使用OnInit渲染。我正在使用ngtemplateoutlet将模板作为面板内容渲染。

但是我面临着第三级嵌套面板内容渲染的问题，它并没有呈现第三或更多级别的嵌套面板的内容。我尝试了后廷尼蒂特，但不起作用。

stackblitz链接扩展面板。

有什么方法可以解决此问题？

Answer 1

您已经在嵌套的<expansion>组件中添加了MultiplenestedPanel模板，因此父 <my-app>组件不再能够看到它们。将模板移到<my-app>的主要DOM结构之外，以便通过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>