角度材料-将代码拆分为组件时出现意外行为

Question

我有一个简单的带角度的页面，带有右侧导航栏的角度材料。 当我在应用程序组件上编写所有代码时，所有功能均按预期工作时，导航栏将按预期方式在工具栏和主页之外打开。
参见Demo As Expected
但是，当我尝试将应用程序根目录拆分为组件时，工具栏上的侧面导航浮动，而不是应像navbar的mode =“ side”那样。
参见Demo Not As Expected

我尝试使用CSS /添加fxFlex，但行为仍然相同

我在这里想念什么？

Answer 1

使用更多组件意味着更多div包装您的代码...

此“附加” div困扰着mat-sidenav的正常行为

因此，诀窍是仅将<mat-sidenav>排除在主要组件（在您的情况下sidenav-autosize-example）中，而将内容放在新组件中（在您的情况下<app-main-menu></app-main-menu>）

还可以在sidenav-autosize-example CSS中使用:host设置子组件内容的样式。

See working code

<mat-sidenav-container class="example-container" fullscreen autosize>
  <app-toolbar></app-toolbar>
  <mat-sidenav #sidenav class="example-sidenav" mode="side" position="end" opened="true">
    <app-main-menu></app-main-menu>
  </mat-sidenav>
</mat-sidenav-container>

Answer 2

我认为这与Angular Material元素层次结构有关。

创建组件时，Angular在父组件和子组件之间放置另一个HTML标记，并带有子组件名称。像下面那样更改代码，Side Nav可以工作。

由于Side Nav元素会影响父元素的方向，因此我认为必须将其放置在depends_on_past>元素之后。

dag_run