РЕДАКТИРОВАТЬ:
Я это исправил. Проблема заключалась в том, что я не мог просто обернуть свой appcomponent в sidenav, а скорее мне нужно было использовать все те же свойства из app-sidenav.component. Поэтому в AppComponent я изменил его на следующее:
<app-header></app-header>
<mat-sidenav-container class="main-sidenav">
<mat-sidenav [disableClose]="true" autosize class="sidenav" mode="side" opened #sidenav>
<app-sidenav></app-sidenav>
</mat-sidenav>
<mat-sidenav-content>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>
Затем я переместил службу sidenav, чтобы она стала частью компонента приложения. Полностью удалив <mat-sidenav>... и <mat-sidenav-content>... из отдельных компонентов и вместо этого поместив их в модуль приложения с точными спецификациями, как и раньше, это сработало.
Если вы не оборачивайте компонент приложения правильными свойствами, Angular попытается изменить свойства полей и сбросит макет.
Оригинальный вопрос:
Я работаю над проект, но я довольно новичок в аспектах Angular, и я просто не могу понять, как это определить. В настоящее время у меня есть приложение с заголовком (панелью инструментов), sidenav и областью основного контента. В заголовке есть кнопка «Переключатель», которая использует сервис для переключения на боковую панель. Это работает, как и ожидалось до сих пор.
Однако проблема, с которой я сталкиваюсь, относится к основной области содержимого, которая должна быть справа от sidenav. Таким образом, когда sidenav открыт, он остается справа, а когда он закрыт, он остается справа. Из того, что я видел до сих пор, мне нужно использовать <mat-sidenav-content>, чтобы сохранить позиционирование этого контента.
В настоящее время в моем app.component.html я использую розетку маршрутизатора, чтобы отображать различное содержимое в основной области содержимого. Вот как это выглядит:
AppComponent
<app-header></app-header>
<mat-sidenav-container class="main-sidenav">
<app-sidenav></app-sidenav>
<router-outlet></router-outlet>
</mat-sidenav-container>
App-Sidenav
<mat-sidenav [disableClose]="true" autosize class="sidenav" mode="side" opened #sidenav>
...
</mat-sidenav>
И это прекрасно работает с моим заголовком
Заголовок
<mat-toolbar class="header">
<a routerLink="/workouts" href="#" class="logo--link">Logo Goes Here</a>
<button (click)="toggleSidenav()">toggle sidenav</button>
</mat-toolbar>
Основная область содержимого, которую я стараюсь держать всегда справа от sidenav. В настоящее время я пытаюсь заставить workouts.component работать правильно, чтобы я мог использовать метод для других компонентов. :
WorkoutsComponent
<mat-sidenav-content>
<h1>Workout list will go here</h1>
</mat-sidenav-content>
Как сделать так, чтобы этот контент оставался справа от боковой панели независимо от того, открыт он или закрыт?
Я пробовал несколько методов, таких как обертывание элементов в appcomponent с <mat-sidenav>... и <mat-sidenav-content>..., но в итоге это привело к поломке моего приложения.
Вот пока мой стек приложения.
Некоторые настройки настроены, и у меня есть пара компонентов, готовых к go, но если даже один может работать, я уверен, что все остальное может быть реализовано без особых проблем
Спасибо, и дайте мне знать, если я смогу ответить на любые вопросы, которые помогут решить эту проблему.