用于根据用户声明隐藏div或按钮的自定义指令

时间:2019-05-14 02:37:28

标签: angular angular7

我是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];
    };
 }

它根本无法工作。有人可以帮我了解它如何工作吗?

0 个答案:

没有答案