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

我在angular 5中包装angular material扩展面板组件。第一级和第二级面板（即嵌套面板）工作正常，第二级嵌套面板内的内容使用angular life cycle hook AfterViewInit进行渲染。第一级内容是使用OnInit进行渲染。我使用ngTemplateOutlet将模板呈现为面板内容

但是我在第三层嵌套面板内容渲染方面遇到了一个问题，它不是渲染第三层甚至更多层嵌套面板的内容。我尝试了AfterContentInit，但不起作用

stackblitz链接

有没有办法解决这个问题？

您已经在嵌套组件中添加了MultiplenestedPanel模板，因此父组件无法再看到它们。将模板移到的主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>