Question

我有一个在组件内部使用的指令“ hasPermission”。此指令的功能是检查权限（如果没有的话），然后禁用按钮，但是当我对表单字段进行任何更改（例如添加一些文本）时，它会再次启用该按钮，由于[disabled]属性正在寻找原始格式/无效的状态。

我该如何管理？

我想先检查权限（如果存在），然后只有这种原始/无效出现。请指导。

如果我获得此表单的原始/无效内部指令的状态，我相信我们可以管理它，但是如何将其放入内部，我尝试使用DoCheck / Host等解决方案，但没有给我内部指令中的表单引用。

我不想使用nativeElement（直到有人说那是唯一的方法：））

示例代码

   import {
    Directive,
    OnInit
} from '@angular/core';
import {
    NgForm
} from '@angular/forms';
@Directive({
    selector: '[haspermission]'
})
export class HaspermissionDirective implements OnInit {
    constructor() {
        ....
    }
    ngOnInit() {
        this.someService.getCurrentUser().subscribe(response => {
            this.store(response);
        });

    }

    store(data: IUser) {
        this.roles = JSON.parse(data.role);
        //.....doing some logic to calculate permissisons
        var hasPerm = this.roles.find(o => (o.RoleCode in permConfig.permission));
        if (!hasPerm) {
            this.element.nativeElement.disabled = true;
        }
    }
}

Answer 1

Use可以在Directive装饰器上使用exportAs属性。这将公开appHaspermission Directive实例。

exportAs采用组件实例所在的名称导出到模板中。

appHaspermission.Directive.ts

import { Directive, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
@Directive({
  selector: '[appHaspermission]',
  exportAs: 'hasPermission'
})
export class HaspermissionDirective implements OnInit {
  hasPermission = false;
  constructor() {

  }
  ngOnInit() {
    this.hasPermission = true;
  }
}

然后在按钮上创建局部变量，并将其分配给导出的hasPermission指令，以便您可以从模板访问指令属性

<form>
    <input type="text" ngModel name="name" >
 <button #ref="hasPermission" appHaspermission  [disabled]="ref['hasPermission'] && (client.pristine || something else)" >Enable</button>
</form>

示例：https://stackblitz.com/edit/angular-pebven

Angular：指令内未获取表格原始/无效状态的引用

1 个答案: