ngOnInit(): void {
// console.log(this.translate.getLangs())
const elemSidebar = <HTMLElement>document.querySelector('.app-inner > .sidebar-panel');
const elemContent = <HTMLElement>document.querySelector('.app-inner > .mat-sidenav-content');
if (window.matchMedia(`(min-width: 960px)`).matches && !this.isMac() && !this.compactSidebar) {
Ps.initialize(elemSidebar, {wheelSpeed: 2, suppressScrollX: false});
Ps.initialize(elemContent, {wheelSpeed: 2, suppressScrollX: false});
}
this.url = this.router.url;
this._router = this.router.events.filter(event => event instanceof NavigationEnd).subscribe((event: NavigationEnd) => {
document.querySelector('.app-inner .mat-sidenav-content').scrollTop = 0;
this.url = event.url;
this.runOnRouteChange();
});
this.getMenus();
}
ngAfterViewInit(): void {
// this.root.dir = 'rtl';
this.runOnRouteChange();
}
ngOnDestroy(): void {
this._router.unsubscribe();
}
runOnRouteChange(): void {
if (this.isOver()) {
this.sidemenu.close();
}
}
isOver(): boolean {
if (this.url === '/apps/messages' ||
this.url === '/apps/calendar' ||
this.url === '/apps/media' ||
this.url === '/maps/leaflet' ||
this.url === '/taskboard') {
return true;
} else {
return window.matchMedia(`(max-width: 960px)`).matches;
}
}
isMac(): boolean {
let bool = false;
if (navigator.platform.toUpperCase().indexOf('MAC') >= 0 || navigator.platform.toUpperCase().indexOf('IPAD') >= 0) {
bool = true;
}
return bool;
}
menuMouseOver(): void {
if (window.matchMedia(`(min-width: 960px)`).matches && this.collapseSidebar) {
this.sidemenu.mode = 'over';
}
}
menuMouseOut(): void {
if (window.matchMedia(`(min-width: 960px)`).matches && this.collapseSidebar) {
this.sidemenu.mode = 'side';
}
}
getMenus() {
let aclArray = [];
this.authService.getProfile().subscribe(data => {
if (!data.success) {
this.snackBar.open(data.message, '', {
duration: 2000,
extraClasses: ['error-snackbar']
});
} else {
let index = 0;
console.log(data.user.rows)
data.user.rows.forEach((row) => {
// const roleid = row.rolesid;
this.roleService.getRoleByID(row.roles_id).subscribe(role => {
if (!role.success) {
this.snackBar.open(role.message, '', {
duration: 2000,
extraClasses: ['error-snackbar'],
});
} else {
console.log(role)
role.role.rows.forEach(row => {
this.roleService.getRoleAcls(row.id).subscribe(acls => {
if(!acls.success){
this.snackBar.open(role.message, '', {
duration: 2000,
extraClasses: ['error-snackbar'],
});
} else {
console.log(acls)
acls.acl.rows.forEach(row => {
const aclid = row.acl_id;
if(aclArray.indexOf(aclid) < 0) {
aclArray.push(aclid);
}
});
index ++;
if(index == data.user.rows.length){
aclArray.forEach(id => {
this.aclService.getAclById(id).subscribe(acl => {
console.log(acl.acl.rows)
acl.acl.rows.forEach(row => {
if(!isUndefined(row)){
const id = row.id;
this.aclService.getChildrenAcl(id).subscribe(children => {
if(!children.success){
this.snackBar.open(children.message, '', {
duration: 2000,
extraClasses: ['error-snackbar']
});
} else {
for(let i in acl.acl.rows){
acl.acl.rows[i]['children'] = [];
children.children.rows.forEach(row1 => {
if(aclArray.indexOf(row1.id) >= 0){
acl.acl.rows[i]['children'].push(row1);
}
})
}
}
});
for(let j in acl.acl.rows){
this.aclItems.push(acl.acl.rows[j]);
}
}
})
})
})
}
}
})
})
}
});
});
}
});
}<md-sidenav-container class="app-inner">
<md-sidenav #sidemenu class="sidebar-panel" id="sidebar-panel" [mode]="isOver() ? 'over' : 'side'" [opened]="!isOver()" (mouseover)="menuMouseOver()" (mouseout)="menuMouseOut()">
<md-nav-list appAccordion class="navigation" >
<!--(click)="updatePS()"-->
<md-list-item appAccordionLink *ngFor="let menuitem of aclItems" group="{{menuitem.state}}">
<a appAccordionToggle class="relative" [routerLink]="['/', menuitem.state]" *ngIf="menuitem.type === 'link'">
<md-icon>{{ menuitem.icon }}</md-icon>
<span class="font">{{ menuitem.name | translate }}</span>
<span fxFlex></span>
<span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
</a>
<a appAccordionToggle class="relative" [routerLink]="['/mail', menuitem.state]" *ngIf="menuitem.type === 'mail'">
<md-icon>{{ menuitem.icon }}</md-icon>
<span class="font">{{ menuitem.name | translate }}</span>
<span fxFlex></span>
<span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
</a>
<a appAccordionToggle class="relative" href="{{menuitem.state}}" *ngIf="menuitem.type === 'extLink'">
<md-icon>{{ menuitem.icon }}</md-icon>
<span class="font">{{ menuitem.name | translate }}</span>
<span fxFlex></span>
<span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
</a>
<a appAccordionToggle class="relative" href="{{menuitem.state}}" target="_blank" *ngIf="menuitem.type === 'extTabLink'">
<md-icon>{{ menuitem.icon }}</md-icon>
<span class="font">{{ menuitem.name | translate }}</span>
<span fxFlex></span>
<span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
</a>
<a appAccordionToggle class="relative" href="javascript:;" *ngIf="menuitem.type === 'sub'">
<md-icon>{{ menuitem.icon }}</md-icon>
<span class="font">{{ menuitem.name | translate }}</span>
<span fxFlex></span>
<span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
<md-icon class="menu-caret">arrow_drop_down</md-icon>
</a>
<md-nav-list class="sub-menu" *ngIf="menuitem.type === 'sub'">
<md-list-item *ngFor="let childitem of menuitem.children" routerLinkActive="open">
<a [routerLink]="['/', menuitem.state, childitem.state ]" class="relative" >{{ childitem.name | translate }}</a>
</md-list-item>
</md-nav-list>
</md-list-item>
<!--<md-divider></md-divider>-->
<!--<md-list-item>-->
<!--<a (click)="addMenuItem()">-->
<!--<md-icon>add</md-icon>-->
<!--<span>Add</span>-->
<!--</a>-->
<!--</md-list-item>-->
</md-nav-list>
</md-sidenav>
<router-outlet></router-outlet>
</md-sidenav-container>我有一个包含 layout.component 的 Angular 2 应用程序。在 layout.component.html 我有一个侧边菜单，在路由器插座部分的侧边菜单中，我运行我的其他组件。代码是这样的：
<md-sidenav-container>
<md-sidenav>(some codes here</md-sidenav>
<router-outlet> </router-outlet>
</md-sidenav-container>
在侧导航中，我有一些项目来运行组件的状态。但是当我点击其中一个时，侧导航会重新加载，有时它无法获取项目。我怎样才能只重新加载路由器插座而不是侧导航？
这是路由代码：
{
path: '',
component: AdminLayoutComponent,
canActivate: [AuthGuard],
children: [
// {
// path: 'dashboard',
// loadChildren: './components/dashboard/dashboard.module#DashboardModule'
// },
{
path: 'profile',
loadChildren: './components/profile/profile.module#ProfileModule'
},
{
path: 'usermanagement',
loadChildren: './components/usermanagement/usermanagement.module#UsermanagementModule'
},
{
path: 'contact',
loadChildren: './components/contact/contact.module#ContactModule'
},
{
path: 'setting',
loadChildren: './components/setting/setting.module#SettingModule'
},
{
path: 'incoming',
loadChildren: './components/mail/incoming/incoming.module#IncomingModule'
},
{
path: 'outgoing',
loadChildren: './components/mail/outgoing/outgoing.module#OutgoingModule'
},
{
path: 'showincoming',
loadChildren: './components/mail/showincoming/mail.module#MailModule'
},
{
path: 'showoutgoing',
loadChildren: './components/mail/showoutgoing/out.module#OutModule'
},
{
path: 'viewoutgoing',
loadChildren: './components/mail/view-outgoing/viewoutgoing.module#ViewoutgoingModule'
},
]
}];