自定义组件内的角度材质Sidenav无法正确渲染右侧sidenav [英] Angular Material Sidenav inside custom component doesn't render right sidenav properly

问题描述

我在使用mat-sidenav容器(自定义组件的一部分)中使用带有position ="end"的mat-sidenav时遇到问题.自定义组件本质上是mat-sidenav容器，左侧mat-sidenav以及用于左侧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中的错误?

谢谢.

解决方案

根据 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>

I'm having a problem using a mat-sidenav with position="end" inside a mat-sidenav-container that is part of a custom component. The custom component is essentially the mat-sidenav-container, the left side mat-sidenav, plus ng-content slots for the left sidenav content, page content, and an optional right mat-sidenav.

Sample: https://stackblitz.com/edit/angular-fxp7dt

The problem is that the right sidenav backdrop does not display. A DOM inspection shows that the right mat-sidenav is added inside the mat-content element which is probably why the backdrop is missing. If the same kind of layout is set up without a custom component for the mat-sidenav-container, the right side mat-sidenav is a sibling of mat-content and the other mat-sidenav.

Can anybody see what I might be doing wrong? Or does this seem like a bug in Angular Material?

Thanks.

解决方案

According to https://github.com/angular/material2/issues/9438, this usage isn't supported. The workaround is to to include the second mat-sidenav element in the custom component and provide just the content for it instead of the mat-sidenav itself. This kind of thing:

<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>

这篇关于自定义组件内的角度材质Sidenav无法正确渲染右侧sidenav的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！