我是angular7的新手,它试图创建一个指令,该指令基本上检查用户是否有声明,然后仅显示按钮,否则隐藏或禁用。登录时,我进入了键,值对的声明列表集。
import { Input, Directive, ElementRef, Output } from '@angular/core';
import { uiCLaimsService } from './ui-claims.service.service';
import { timeout } from 'rxjs/operators';
import * as _ from 'lodash';
@Directive({
selector: '[uiClaims]'
})
export class uiClaimsDirective {
@Input() claimElementClass;
@Input() claimsList;
@Input() onClaimFail;
constructor(private elem: ElementRef , private ucl: uiCLaimsService) { }
ngOnInit() {
if (this.claimsList) {
if (_.indexOf(this.ucl.routeClaims, this.claimsList[0]) === -1) {
setTimeout(() => {
switch (onClaimFail) {
case 'disable':
this.disableElement();
break;
case 'hide':
this.hideElement();
break;
// case 'read-only':
this.readOnlyElement();
break;
default:
this.hideElement();
break;
}
});
}
}
}
disableElement() {
let el = claimElementClass? elem.find('.' + claimElementClass): elem;
el.addClass('is-disabled');
}
hideElement() {
let el = claimElementClass ? elem.find('.' + claimElementClass) : elem;
el.addClass('ng-hide');
}
readOnlyElement() {
let el = claimElementClass ? elem.find('.' + claimElementClass) : elem;
elem(el[0]).removeClass('ng-hide');
elem(el[1]).addClass('ng-hide');
}
}
索赔服务---
import { Injectable } from '@angular/core';
import * as _ from 'lodash';
import { LocalStorageService } from '../../../common/services/local-
storage.service';
@Injectable({
providedIn: 'root'
})
export class uiCLaimsService {
constructor(private lss: LocalStorageService) { }
UIClaims;
this.UIClaims.getRouteClaims = routeClaimKey => {
let allClaims = this.lss.get('claims')
let routeClaimsArr = _.pickBy(allClaims, function (value, key) {
return key === routeClaimKey;
})
return routeClaimsArr[routeClaimKey];
};
}
它根本无法工作。有人可以帮我了解它如何工作吗?