src/app/layout/html-builder/html-builder.component.ts
| selector | app-html-builder |
| styleUrls | ./html-builder.component.less |
| templateUrl | ./html-builder.component.html |
Properties |
|
Methods |
|
constructor(router: Router)
|
||||||
|
Parameters :
|
| Public ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| Public path |
Type : string
|
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-html-builder',
templateUrl: './html-builder.component.html',
styleUrls: ['./html-builder.component.less'],
})
export class HtmlBuilderComponent implements OnInit {
public path: string;
constructor(private router: Router) {
this.path = this.router.url;
}
public ngOnInit(): void {
}
}
<nz-layout>
<nz-header>
<a class="logo" routerLink="/dashboard"></a>
<ul nz-menu nzTheme="dark" nzMode="horizontal">
<li nz-menu-item [nzSelected]="path === '/html-builder/page-editor'">
<a [routerLink]="['page-editor']">构建工具</a>
</li>
<li nz-menu-item [nzSelected]="path === '/html-builder/component-maker'">
<a [routerLink]="['component-maker']">组件制作</a>
</li>
<li nz-menu-item [nzSelected]="path === '/html-builder/page-updater'">
<a [routerLink]="['page-updater']">批量更新</a>
</li>
</ul>
</nz-header>
<nz-layout>
<router-outlet></router-outlet>
</nz-layout>
</nz-layout>
./html-builder.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;
}
}