在mat-tab中嵌套mat-sidenav是否合法？附代码示例

完全合法！Angular Material的组件设计本身就支持这种嵌套使用方式，只要遵循组件的基本结构要求就行。

你给出的这段代码结构是完全没问题的：

<mat-tab-group>
  <mat-tab label="test">
    <mat-sidenav-container>
      <mat-sidenav>
        <h1>Sidenav</h1>
      </mat-sidenav>
      <h1>Main Content</h1>
    </mat-sidenav-container>
  </mat-tab>
</mat-tab-group>

不过有几个小细节需要注意，避免出现显示异常：

• 高度适配问题：因为mat-tab的内容在未激活时是隐藏状态，有时候mat-sidenav-container可能无法自动继承父容器的高度。你可以给mat-sidenav-container添加样式，比如height: 100vh或者基于父容器的百分比高度，确保侧边栏和主内容区能正常占满可用空间。
• 版本兼容性：虽然核心逻辑在各个Angular Material版本中都支持，但如果是比较旧的版本，可能存在一些已知的小bug，建议使用当前稳定版的Angular Material来避免不必要的问题。

总的来说，这种写法是完全符合Angular Material组件的使用规范的，放心用就行。

内容的提问来源于stack exchange，提问作者cksrc