Из документов вы можете использовать схемы для создания полной навигации и настройки поведения и аспекта по своему усмотрению.
ng generate @angular/material:table <component-name>
Приведенная выше команда создаст полностью адаптивную навигацию компонента, и он импортирует необходимые модули.
Если вы хотите сделать это вручную, вы можете увидеть пример ниже (в основном то, что сгенерирует команда выше):
HTML template:
<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) === false"
>
<mat-toolbar>Menu</mat-toolbar>
<mat-nav-list>
<a mat-list-item href="#">Link 1</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>blog</span>
</mat-toolbar>
<!-- Add Content Here -->
<ng-content></ng-content>
</mat-sidenav-content>
</mat-sidenav-container>
Файл TypeScript
import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map, shareReplay } from 'rxjs/operators';
@Component({
selector: 'it-nav-example',
templateUrl: './nav-example.component.html',
styleUrls: ['./nav-example.component.scss']
})
export class NavExampleComponent {
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches),
shareReplay()
);
constructor(private breakpointObserver: BreakpointObserver) {}
}
CSS file
.sidenav-container {
height: 100%;
}
.sidenav {
width: 200px;
}
.sidenav .mat-toolbar {
background: inherit;
}
.mat-toolbar.mat-primary {
position: sticky;
top: 0;
z-index: 1;
}
Независимо от того, как вы решите создать навигацию, убедитесь, что ваши маршруты находятся внутри навигации компонент в вашем root компоненте так:
app.component. html
<app-nav-example>
<router-outlet></router-outlet>
</app-nav-example>