Просто промочаю ноги в JS / TS / CSS / HTML / Angular6, и я пытаюсь сделать довольно простое c веб-приложение. Я создал приложение angular и попытался создать заголовок, используя готовую навигационную схему c. Это заняло у меня некоторое время, но я понял, что боковое навигационное меню не должно было оставаться открытым и должно быть закрываемым.
Я отметил, где в HTML я могу открывать / закрывать меню:
[opened]="(isHandset$ | async) === false">
Но есть встроенная кнопка переключения, которая, как мне кажется, должна оставаться открытой, когда вы установите для этого значения значение true. Я не изменил схему c, за исключением добавления маршрутизатора к своему контенту, указанному в схеме c, поэтому я не думаю, что это вызывает проблему, и я очень плохо знаком с JS / HTML, поэтому я ' Я не уверен, почему это не работает из коробки.
HTML (header.component. html):
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav" fixedInViewport
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="(isHandset$ | async) === true">
<mat-toolbar>Menu</mat-toolbar>
<mat-nav-list>
<a mat-list-item href="actions">Action List</a>
<a mat-list-item href="#">Link 2</a>
<a mat-list-item href="#">Link 3</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span>Dnd 5e Reference Site</span>
</mat-toolbar>
<!-- Add Content Here -->
<app-homepage></app-homepage>
</mat-sidenav-content>
</mat-sidenav-container>
TS (header.component. ts):
import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map, shareReplay } from 'rxjs/operators';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent {
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches),
shareReplay()
);
constructor(private breakpointObserver: BreakpointObserver) {}
}
Файл s css (header.component.s css):
.sidenav-container {
height: 100%;
}
.sidenav {
width: 200px;
}
.sidenav .mat-toolbar {
background: inherit;
}
.mat-toolbar.mat-primary {
position: sticky;
top: 0;
z-index: 1;
}
Изображение того, как приложение выглядит при закрытом меню. Обратите внимание, я считаю, что должна быть кнопка меню в верхнем левом или верхнем правом углу, которая открывает меню, когда оно закрыто.
Домашняя страница веб-приложения, когда [Opened] = "true"
Если бы кто-нибудь мог объяснить, в чем проблема со схемами c, это было бы здорово. Кроме того, если у кого-то есть ресурсы, которые они рекомендуют для упражнений на Observables или использования тегов ng в angular, я был бы очень признателен.
Спасибо!