Угловой материал - неожиданное поведение при разбиении кода на компонент

Question

У меня есть простая угловая страница с правой стороны углового материала.когда я пишу весь код в компоненте приложения, все работает как положено, навигационная панель открывается в стороне от панели инструментов и главной страницы, как и ожидалось.
см. Демонстрация как ожидается
Но когда я попыталсяразделите корень приложения на компонент боковой навигационной плавающей точкой на панели инструментов, а не как режим = "сторона" навигационной панели.
см. Демонстрация не соответствует ожиданиям

Я пыталсяиграть с CSS / добавить fxFlex, но поведение все еще то же самое

Что мне здесь не хватает?

Answer 1

Когда вы используете больше компонентов, это означает, что больше div оборачивает ваш код ...

Этот "дополнительный" div беспокоит поведение noraml mat-sidenav

Таким образом, хитрость заключается в том, чтобы исключить только <mat-sidenav> для основного компонента (в вашем случае sidenav-autosize-example) и содержимое, помещенное в новый компонент (в вашем случае <app-main-menu></app-main-menu>)

Также используйте :host в sidenav-autosize-example css для стилизации содержимого дочернего компонента.

См. Рабочий код

<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 влияет на ориентацию родительского элемента, я думаю, что он должен быть расположен сразу после элемента <mat-sidenav-container>.

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