Невозможно привязать к пользовательской директиве Angular 9 - PullRequest
Новая
       15

Невозможно привязать к пользовательской директиве Angular 9

0 голосов
/ 25 марта 2020

Я хотел создать свою собственную директиву аутентификации, которая скрывает контент, когда у пользователя нет нужной роли.

К сожалению, я получаю 

Error: Template parse errors:
Can't bind to 'appHasRole' since it isn't a known property of 'div'.

Я следовал каждому учебнику, каждому вопрос переполнения стека, кажется, ничего не помогает.

Я создал директиву: 

import {Directive, ElementRef, Input, TemplateRef, ViewContainerRef} from '@angular/core';
import {AuthService} from '../../../security/auth.service';

@Directive({
  selector: '[appHasRole]'
})
export class HasRoleDirective {

  role: string;

  constructor(private element: ElementRef,
              private templateRef: TemplateRef<any>,
              private viewContainer: ViewContainerRef,
              private authService: AuthService) { }

  private updateView() {
    if (this.checkPermission()) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }

  private checkPermission() {
    // logic for determining role
  }

  @Input()
  set hasRole(val) {
    this.role = val;
    this.updateView();
  }
}

Поскольку у меня несколько модулей, я создал SharedModule 

import {NgModule} from '@angular/core';
import {HasRoleDirective} from './directives/has-role.directive';

@NgModule({
  declarations: [HasRoleDirective],
  exports: [HasRoleDirective]
})
export class SharedModule {
}

Затем импортируем директива в модуле моей домашней страницы (также пробовал в app.module) 

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {HomeComponent} from './home/home.component';
import {SharedModule} from '../shared/shared.module';

@NgModule({
  declarations: [HomeComponent],
  imports: [
    CommonModule,
    ...
    SharedModule
  ]
})
export class HomeModule {
}

И, наконец, использование директивы в home.component. html

<div class="button-group" *appHasRole="['admin']">
...

1 Ответ

4 голосов
/ 25 марта 2020

Просто добавьте appHasRole в @Input, потому что он искал атрибут hasRole.

Если @Input не имеет параметра Angular, ищет атрибут со свойством propertyName. Если вы передаете параметр в @Input, Angular ищет атрибут со значением переданного параметра. 

@Input('appHasRole') 
   set hasRole(val) {
       this.role = val;
       this.updateView();
    }
...