Angular Material Sidenav inside custom component doesn't render right sidenav properly

问题

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.

回答1:

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>

来源：https://stackoverflow.com/questions/48290045/angular-material-sidenav-inside-custom-component-doesnt-render-right-sidenav-pr