我在Angular比较陌生。我正在我的项目中实施kenji sidenav-1996 link here的示例。
我需要许多侧边栏菜单行为，但是，在移动环境中尝试滚动条时，我遇到了问题。当您隐藏菜单并再次显示它时，菜单滚动条不会保持其原来的位置，而是会“重新引导”并返回。我知道这似乎是一个很小的细节，但我坚信，用户体验的基础是纠正这些微小的细节并为用户提供舒适感
以下图像可以更好地描述问题：）
我已经查看了Angular和Angular材料的文档，但是我没有找到相应的解决方案，或者也许我不太了解它。 ：（
我已经审查了Angular和Angular材料的文档，但是我没有找到相应的解决方案，或者也许我不太了解该文档。 ：（
HTML组件：
<mat-toolbar color="primary" class="main-nav mat-elevation-z4">
<button mat-icon-button (click)="start.toggle()" class="icon-padding">
<mat-icon aria-hidden="true">menu</mat-icon>
</button>
<button mat-button routerLink="/"><strong>Prueba Menu Sidenav</strong></button>
<!-- This fills the remaining space of the current row -->
<span class="fill-remaining-space"></span>
<button mat-icon-button class="icon-padding">
<mat-icon aria-hidden="true">notifications</mat-icon>
</button>
</mat-toolbar>
<mat-sidenav-container class="sidenav-container">
<mat-sidenav class="mat-elevation-z10" #start [opened]="open" fixedTopGap="64" [mode]="mode" fixedInViewport="true" style="width:240px;">
<mat-list dense>
<ng-container *ngFor="let nav of navList">
<mat-expansion-panel class="mat-elevation-z0" hideToggle="true" [expanded]="nav.dropDown">
<mat-expansion-panel-header>
<mat-panel-title>
<mat-icon mat-list-icon>{{nav.icon}}</mat-icon>
<span class="nav-list-item" style="margin-left: 10px;">{{nav.categoryName}}</span>
</mat-panel-title>
</mat-expansion-panel-header>
<mat-nav-list>
<div style="margin-top: -20px;">
<ng-container *ngFor="let subCategory of nav.subCategory">
<ng-container *ngIf="subCategory.visable"> <!--Sub category list-->
<mat-list-item (click)="mode === 'over'? start.close() : null" routerLinkActive="mat-icon-active" style="margin-left: -70px;margin-right: -24px;">
<a mat-list-item [routerLink]="subCategory.subCategoryLink" mat-line style="margin-left: 30px;">
<mat-icon class="sidenav-icon" style="margin-left: 18px;">{{subCategory.subCategoryQuery}}</mat-icon>
<span style="margin-left: 3px;">{{subCategory.subCategoryName}}</span>
</a>
</mat-list-item>
</ng-container>
</ng-container>
</div>
</mat-nav-list>
</mat-expansion-panel>
</ng-container>
</mat-list>
</mat-sidenav>
<mat-sidenav-content style="margin-top:64px;">
<div style="margin: 10px;">
<router-outlet></router-outlet>
</div>
<div style="height: 64px;"></div>
</mat-sidenav-content>
</mat-sidenav-container>
<mat-menu x-position="before" #menu="matMenu">
<button mat-menu-item routerLink="/profile"><mat-icon aria-hidden="true">settings</mat-icon>Settings</button>
<button mat-menu-item routerLink="/profile"><mat-icon aria-hidden="true">account_box</mat-icon>Profile</button>
<button mat-menu-item routerLink="/profile"><mat-icon aria-hidden="true">exit_to_app</mat-icon>Sign out</button>
</mat-menu>
Component.ts：
import {Component, NgZone, OnInit} from '@angular/core';
import {Router} from '@angular/router';
@Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.scss']
})
export class MainComponent implements OnInit {
// Sidenav responsive
width;
height;
mode = 'side';
open = 'true';
title = 'Responsive Sidenav Starter';
navList: NavList[];
constructor(public ngZone: NgZone,
public route: Router, ) {
this.navList = [
{ categoryName: 'Menu', icon: 'face', dropDown: true,
subCategory:
[
{ subCategoryName: 'Submenu', subCategoryLink: '/link', visable: true, },
{ subCategoryName: 'Submenu', subCategoryLink: '/principal', visable: true, },
{ subCategoryName: 'Submenu', subCategoryLink: '/link1', visable: true, },
]
},
{ categoryName: 'Menu', icon: 'face', dropDown: false,
subCategory:
[
{ subCategoryName: 'Submenu', subCategoryLink: '/link', visable: true, },
{ subCategoryName: 'Submenu', subCategoryLink: '/principal', visable: true, },
{ subCategoryName: 'Submenu', subCategoryLink: '/link1', visable: true, },
]
},
{ categoryName: 'Menu', icon: 'question_answer', dropDown: false,
subCategory:
[
{ subCategoryName: 'Submenu', subCategoryLink: '/link1', visable: true, },
{ subCategoryName: 'Submenu', subCategoryLink: '/link1', visable: true, },
{ subCategoryName: 'Submenu', subCategoryLink: '/link1', visable: true, },
]
},
{ categoryName: 'Menu', icon: 'work', dropDown: false,
subCategory:
[
{ subCategoryName: 'Submenu', subCategoryLink: '/link1', visable: true, },
{ subCategoryName: 'Submenu', subCategoryLink: '/link1', visable: true, },
{ subCategoryName: 'Submenu', subCategoryLink: '/link1', visable: true, },
]
},
];
this.changeMode();
window.onresize = (e) => {
ngZone.run(() => {
this.changeMode();
});
};
}
ngOnInit() {
}
changeMode() {
this.width = window.innerWidth;
this.height = window.innerHeight;
if (this.width <= 800) {
this.mode = 'over';
this.open = 'false';
}
if (this.width > 800) {
this.mode = 'side';
this.open = 'true';
}
}
}
export class NavList {
categoryName: string;
icon: string;
dropDown: boolean;
subCategory: NavListItem[];
constructor(_categoryName: string, _icon: string, _dropDown: boolean, _subCategory: NavListItem[]) {
this.categoryName = _categoryName;
this.icon = _icon;
this.dropDown = _dropDown;
this.subCategory = _subCategory;
}
}
export class NavListItem {
subCategoryName: string;
subCategoryLink: string;
subCategoryQuery?: any;
visable: boolean;
}
Component.scss：
// angular material colors
@import '../../../theme';
.sidenav-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.main-nav {
position: fixed;
top: 0px;
left: 0;
width: 100% !important;
z-index: 5;
}
.icon-padding {
margin-left: 3px;
margin-right: 3px;
}
.nav-list-exp {
padding: 0 !important;
}
.nav-list-item {
background-color: #FFF;
transition: background 0.2s linear;
}
.mat-icon-active mat-icon {
transition: color 0.2s linear;
color: mat-color($primary) !important;
}
.nav-category-open {
transition: color 0.2s linear;
color: mat-color($primary) !important;
}
.nav-list-item:hover {
cursor: pointer;
background:#c5c5c5;
}
.nav-list-item-text {
padding-left: 18px;
font-size: 0.8em;
}
.nav-list-icon {
margin-left: 5px;
}
mat-toolbar {
height: 64px !important;
min-height: 64px !important;
mat-toolbar-row {
height: 64px !important;
}
}
在此先感谢您的帮助：）