Блог

Главная - Вопросы по программированию - mat-sidenav скрывает содержимое при первоначальном открытии

mat-sidenav скрывает содержимое при первоначальном открытии

#angular #angular-material

#angular #angular-material

Вопрос:

Сценарий :

  • У меня действительно есть mat-sidenav, открывающийся слева и справа.
    Все работает нормально при запуске нажатием кнопки или любым взаимодействием пользователя.
  • Но я также хочу открыть это при загрузке страницы. И тогда у меня действительно возникают проблемы с отображением. Когда управляющей переменной projectSelectorOpened присвоено значение true, боковая панель скрывает содержимое страницы. При запуске пользователем содержимое корректно перемещается в середину.

Также пытался установить переменной значение true с помощью setTimeout … Работает, если установлено значение в несколько секунд.
Но это не то, чего я хочу.

Вот соответствующий код:

 <mat-sidenav-container fullscreen>
<mat-sidenav #projectSelector mode="side" [(opened)]="projectSelectorOpened">
    <div class="list-group-item" (click)="projectSelectorOpened = !projectSelectorOpened">
        <i class="fa fa-arrow-circle-left"></i> {{l10n.get('T_Projects')}}
    </div>
    <project-selector [selectedProjectId]="projectId" [selectedComponentId]="componentId"></project-selector>
</mat-sidenav>

<mat-sidenav-content>

</mat-sidenav-content>

<mat-sidenav #projectSelector2 mode="side" position="end" [(opened)]="projectSelectorOpened">
    <div class="list-group-item" (click)="projectSelectorOpened = !projectSelectorOpened">
        <i class="fa fa-arrow-circle-left"></i> {{l10n.get('T_Projects')}}
    </div>
    <project-selector [selectedProjectId]="projectId"></project-selector>
</mat-sidenav>

Комментарии:

1. Укажите значение по умолчанию для projectSelectorOpened переменной как true, она работает нормально. Смотрите: stackblitz.com/edit / … , если не подходит, то, пожалуйста, создайте демонстрационную версию stackblitz, воспроизводящую эту проблему.

2. Обнаружил, что эта проблема появляется только в браузере Chrome

3. но демонстрационная версия stackblitz, которую я предоставил, работает в браузере Chrome.

4. Интересно, что я сталкиваюсь с той же проблемой, однако при изменении размера окна она корректируется. У меня есть container-fluid и какой-то другой компонент внутри mat-sidenav-content, и каким-то образом в вашем stackblitz это невозможно воспроизвести