У меня есть директива 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;
}
}
}
добавлен пример кода





Использование может использовать свойство exportAs в декораторе Directive. Который будет предоставлять экземпляр директивы appHaspermission.
The exportAs takes the name under which the component instance is exported in a template.
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
Круто, позвольте мне попробовать это, а затем за исключением этого в качестве ответа :)
Не могли бы вы взглянуть на мой код выше и предложить, если логика для расчета разрешения находится в правильном месте? я использую магазин
Я так думаю, и я не хороший рецензент кода. И место, где вы ставите метод магазина, правильное
Нужно ли добавлять #ref = "hasPermission" к кнопке?
да, чтобы вы могли получить экземпляр директивы haspermission
А, понял, это ссылочная переменная. В некоторых случаях мы используем его напрямую с #
Что вы ожидаете - код angular или angularJs? Также лучше предоставить текущий код директивы