Question

我在mat-sidenav-container中使用mat-sidenav和position =“end”时遇到问题，该容器是自定义组件的一部分。自定义组件本质上是mat-sidenav-container，左侧mat-sidenav，以及用于左侧边内容，页面内容和可选右侧mat-sidenav的ng-content插槽。

示例：https://stackblitz.com/edit/angular-fxp7dt

问题是右侧的背景幕不显示。 DOM检查显示在mat-content元素内添加了正确的mat-sidenav，这可能是缺少背景的原因。如果在没有mat-sidenav-container的自定义组件的情况下设置相同类型的布局，则右侧mat-sidenav是mat-content和另一个mat-sidenav的兄弟。

任何人都可以看到我可能做错了吗？或者这似乎是Angular Material中的一个错误？

感谢。

Answer 1

根据https://github.com/angular/material2/issues/9438，不支持此用法。解决方法是在自定义组件中包含第二个mat-sidenav元素，并为其提供内容而不是mat-sidenav本身。这种事情：

<mat-sidenav-container>
    <mat-sidenav #sidenavStart>
        <ng-content select="[sidenavStartContent]"></ng-content>
    </mat-sidenav>
    <ng-content></ng-content>
    <mat-sidenav #sidenavEnd position="end">
        <ng-content select="[sidenavEndContent]"></ng-content>
    </mat-sidenav>
</mat-sidenav-container>

自定义组件内的Angular Material Sidenav无法正确显示右侧空间

1 个答案: