yoyo-ng-modulewindy
Version:
服务于52ABP模板的前端开源的相关组件内容。整合了ng-alain和你NG ZORRO的内容
188 lines • 9.13 kB
JavaScript
import { Component, Input, TemplateRef, ContentChild, Optional, ViewChild, ElementRef, Renderer2, Inject } from '@angular/core';
import { Router } from '@angular/router';
import { toBoolean, isEmpty } from 'yoyo-ng-module/util';
import { TitleService, MenuService } from 'yoyo-ng-module/theme';
import { ReuseTabService } from 'yoyo-ng-module/abc';
import { AdPageHeaderConfig } from './page-header.config';
import { LocalizationService } from 'yoyo-ng-module/abp/localization/localization.service';
var PageHeaderComponent = /** @class */ (function () {
// endregion
function PageHeaderComponent(cog, renderer, route, menuSrv, titleSrv, reuseSrv, localizationSrv) {
this.renderer = renderer;
this.route = route;
this.menuSrv = menuSrv;
this.titleSrv = titleSrv;
this.reuseSrv = reuseSrv;
this.localizationSrv = localizationSrv;
this.inited = false;
//首页链接是否可点击
this.home_link_enabled = true;
this._autoBreadcrumb = true;
this._autoTitle = true;
this._titleSync = false;
this.paths = [];
Object.assign(this, cog);
}
Object.defineProperty(PageHeaderComponent.prototype, "menus", {
get: function () {
if (this._menus) {
return this._menus;
}
this._menus = this.menuSrv.getPathByUrl(this.route.url);
return this._menus;
},
enumerable: true,
configurable: true
});
Object.defineProperty(PageHeaderComponent.prototype, "autoBreadcrumb", {
/**
* 自动生成导航，以当前路由从主菜单中定位
*/
get: function () {
return this._autoBreadcrumb;
},
set: function (value) {
this._autoBreadcrumb = toBoolean(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(PageHeaderComponent.prototype, "autoTitle", {
/**
* 自动生成标题，以当前路由从主菜单中定位
*/
get: function () {
return this._autoTitle;
},
set: function (value) {
this._autoTitle = toBoolean(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(PageHeaderComponent.prototype, "titleSync", {
/**
* 是否自动将标准信息同步至 `TitleService`、`ReuseService` 下
*/
get: function () {
return this._titleSync;
},
set: function (value) {
this._titleSync = toBoolean(value);
},
enumerable: true,
configurable: true
});
PageHeaderComponent.prototype.refresh = function () {
this.setTitle().genBreadcrumb();
};
PageHeaderComponent.prototype.genBreadcrumb = function () {
var _this = this;
if (this.breadcrumb || !this.autoBreadcrumb || this.menus.length <= 0)
return;
var paths = [];
this.menus.forEach(function (item) {
if (typeof item.hideInBreadcrumb !== 'undefined' && item.hideInBreadcrumb)
return;
var title = _this.l(item.name);
paths.push({ title: title, link: item.route && [item.route], icon: item.icon });
});
// add home
if (this.home) {
var homeBreadcrumb = {
title: this.l(this.home),
link: [this.home_link],
icon: 'anticon anticon-home'
};
paths.splice(0, 0, homeBreadcrumb);
}
this.paths = paths;
return this;
};
PageHeaderComponent.prototype.setTitle = function () {
if (typeof this.title === 'undefined' &&
this.autoTitle &&
this.menus.length > 0) {
var item = this.menus[this.menus.length - 1];
var title = item.name;
this.title = title;
}
if (this.titleSync) {
if (this.titleSrv) {
this.titleSrv.setTitle(this.title);
}
if (this.reuseSrv) {
this.reuseSrv.title = this.title;
}
}
return this;
};
PageHeaderComponent.prototype.checkContent = function () {
if (isEmpty(this.conTpl.nativeElement)) {
this.renderer.setAttribute(this.conTpl.nativeElement, 'hidden', '');
}
else {
this.renderer.removeAttribute(this.conTpl.nativeElement, 'hidden');
}
};
PageHeaderComponent.prototype.ngOnInit = function () {
this.refresh();
this.inited = true;
};
PageHeaderComponent.prototype.ngAfterViewInit = function () {
this.checkContent();
};
PageHeaderComponent.prototype.ngOnChanges = function () {
if (this.inited)
this.refresh();
};
PageHeaderComponent.prototype.l = function (key) {
var args = [];
for (var _i = 1; _i < arguments.length; _i++) {
args[_i - 1] = arguments[_i];
}
return this.localizationSrv.l(key, args);
};
PageHeaderComponent.decorators = [
{ type: Component, args: [{
selector: 'page-header',
template: "\n <ng-container *ngIf=\"!breadcrumb; else breadcrumb\">\n <nz-breadcrumb *ngIf=\"paths && paths.length > 0\">\n <nz-breadcrumb-item *ngFor=\"let i of paths;let isLast=last;\">\n <ng-container *ngIf=\"i.link\">\n <a [routerLink]=\"i.link\" *ngIf=\"!isLast&&home_link_enabled\"> \n <i *ngIf=\"i.icon\" class=\"{{i.icon}}\"></i> \n {{i.title}}\n </a>\n <a *ngIf=\"!isLast&&!home_link_enabled\"> \n <i *ngIf=\"i.icon\" class=\"{{i.icon}}\"></i> \n {{i.title}}\n </a>\n <a *ngIf=\"isLast\"> \n <i *ngIf=\"i.icon\" class=\"{{i.icon}}\"></i> \n {{i.title}}\n </a>\n </ng-container>\n <ng-container *ngIf=\"!i.link\">\n <i *ngIf=\"i.icon\" class=\"{{i.icon}}\"></i> \n {{i.title}}\n </ng-container>\n </nz-breadcrumb-item>\n </nz-breadcrumb>\n </ng-container>\n <div class=\"detail\">\n <div *ngIf=\"logo\" class=\"logo\"><ng-template [ngTemplateOutlet]=\"logo\"></ng-template></div>\n <div class=\"main\">\n <div class=\"row\">\n <h1 *ngIf=\"title\" class=\"title\">\n {{title}} \n <span *ngIf=\"desc\" class=\"text-sm text-grey-dark\">\n <nz-divider nzType=\"vertical\"></nz-divider>\n {{desc}}\n </span> \n </h1> \n <div *ngIf=\"action\" class=\"action\">\n <ng-template [ngTemplateOutlet]=\"action\"></ng-template>\n </div> \n </div>\n <div class=\"row\">\n <div class=\"desc\" (cdkObserveContent)=\"checkContent()\" #conTpl><ng-content></ng-content><ng-template [ngTemplateOutlet]=\"content\"></ng-template></div>\n <div *ngIf=\"extra\" class=\"extra\"><ng-template [ngTemplateOutlet]=\"extra\"></ng-template></div>\n </div>\n </div>\n </div>\n <ng-template [ngTemplateOutlet]=\"tab\"></ng-template>\n ",
host: {
'[class.content__title]': 'true',
'[class.ad-ph]': 'true',
},
preserveWhitespaces: false,
},] },
];
/** @nocollapse */
PageHeaderComponent.ctorParameters = function () { return [
{ type: AdPageHeaderConfig },
{ type: Renderer2 },
{ type: Router },
{ type: MenuService },
{ type: TitleService, decorators: [{ type: Optional }, { type: Inject, args: [TitleService,] }] },
{ type: ReuseTabService, decorators: [{ type: Inject, args: [ReuseTabService,] }] },
{ type: LocalizationService }
]; };
PageHeaderComponent.propDecorators = {
conTpl: [{ type: ViewChild, args: ['conTpl',] }],
title: [{ type: Input }],
desc: [{ type: Input }],
home: [{ type: Input }],
home_link: [{ type: Input }],
home_link_enabled: [{ type: Input }],
home_i18n: [{ type: Input }],
autoBreadcrumb: [{ type: Input }],
autoTitle: [{ type: Input }],
titleSync: [{ type: Input }],
breadcrumb: [{ type: ContentChild, args: ['breadcrumb',] }],
logo: [{ type: ContentChild, args: ['logo',] }],
action: [{ type: ContentChild, args: ['action',] }],
content: [{ type: ContentChild, args: ['content',] }],
extra: [{ type: ContentChild, args: ['extra',] }],
tab: [{ type: ContentChild, args: ['tab',] }]
};
return PageHeaderComponent;
}());
export { PageHeaderComponent };
//# sourceMappingURL=page-header.component.js.map