src/app/layout/picture-manager/picture-manager.component.ts
| selector | app-picture-manager |
| styleUrls | ./picture-manager.component.less |
| templateUrl | ./picture-manager.component.html |
Properties |
Methods |
constructor(router: Router, cacheService: CacheService)
|
|||||||||
|
Parameters :
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| path |
Type : string
|
import { Component, OnDestroy, OnInit } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { filter } from 'rxjs/operators';
import { CacheService } from 'src/app/share/cache.service';
@Component({
selector: 'app-picture-manager',
templateUrl: './picture-manager.component.html',
styleUrls: ['./picture-manager.component.less']
})
export class PictureManagerComponent implements OnInit, OnDestroy {
path: string;
constructor(private router: Router, private cacheService: CacheService) {
const navigationEndSubscribe = this.router.events.pipe(
filter(event => event instanceof NavigationEnd)
).subscribe((ev: NavigationEnd) => {
this.path = ev.url;
});
this.cacheService.set('navigationEndSubscribe', navigationEndSubscribe);
}
ngOnInit(): void {
this.path = this.router.url;
}
ngOnDestroy() {
this.cacheService.get<Subscription>('navigationEndSubscribe')?.unsubscribe();
}
}
<nz-layout>
<nz-header>
<a class="logo" routerLink="/dashboard"></a>
<ul nz-menu nzTheme="dark" nzMode="horizontal">
<li nz-menu-item [nzSelected]="path === '/picture-manager/picture-upload'" id="pictureUpper">
<a routerLink="picture-upload">图片上传</a>
</li>
<li nz-menu-item [nzSelected]="path === '/picture-manager/picture-storehouse'" id="pictureManager">
<a routerLink="picture-storehouse">图片仓库</a>
</li>
</ul>
</nz-header>
<nz-content>
<nz-breadcrumb>
<nz-breadcrumb-item><a routerLink="/dashboard">首页</a></nz-breadcrumb-item>
<nz-breadcrumb-item>图片管理</nz-breadcrumb-item>
</nz-breadcrumb>
<div class="inner-content">
<router-outlet></router-outlet>
</div>
</nz-content>
<nz-footer>
Lmr Design ©2020 Implement By Angular
</nz-footer>
</nz-layout>
./picture-manager.component.less
.logo {
width: 120px;
height: 100%;
background-image: url(https://int.mycht.cn/heroes/assets/sticky-logo.png);
background-repeat: no-repeat;
margin: 0 31px 0 0;
float: left;
}
[nz-menu] {
line-height: 64px;
}
nz-breadcrumb {
margin: 16px 0;
}
nz-content {
padding: 0 50px;
}
nz-footer {
text-align: center;
}
.inner-content {
background: #fff;
padding: 24px;
min-height: 80vh;
}
.welcome {
color: #fff;
font-size: large;
[nz-icon] {
font-size: 24px;
vertical-align: sub;
margin-left: 12px;
}
}