Блог

Я создал очень простые директивы (прямо из документации, чтобы заставить ее работать), однако я продолжаю получать эту ошибку:

 Uncaught Error: Template parse errors:
Can't bind to 'appHasPermission' since it isn't a known property of 'button'. ("
                (click)="navigateToSingleCompany()"
                [translate]="'register.text.company'"
                [ERROR ->]*appHasPermission="true"
            >
                Company
"): ng:///DashboardModule/CompaniesOverviewCardComponent.html@41:4
Property binding appHasPermission not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations".
  

Директива является моим общим модулем:

 import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { NavMenuComponent } from "./layout/nav-menu/nav-menu.component";
import { CoreModule } from "../core/core.module";
import { RouterModule } from "@angular/router";
import { SideNavComponent } from "./layout/side-nav/side-nav.component";
import { RegisterCompanyFormComponent } from "./components/register-company-form/register-company-form.component";
import { ReactiveFormsModule } from "@angular/forms";
import { ErrorCardComponent } from "./components/error-card/error-card.component";
import { HasPermissionDirective } from "./directives/has-permission.directive";

@NgModule({
    declarations: [
        NavMenuComponent,
        SideNavComponent,
        RegisterCompanyFormComponent,
        ErrorCardComponent,
        HasPermissionDirective,
    ],
    imports: [CommonModule, CoreModule, RouterModule, ReactiveFormsModule],
    exports: [
        NavMenuComponent,
        SideNavComponent,
        RegisterCompanyFormComponent,
        ErrorCardComponent,
        CommonModule,
        HasPermissionDirective,
    ],
})
export class SharedModule {}
  

Директива просто выглядит так сейчас:

 import { Directive, Input, TemplateRef, ViewContainerRef } from "@angular/core";

@Directive({
    selector: "[appHasPermission]",
})
export class HasPermissionDirective {
    private hasView = false;

    constructor(
        private templateRef: TemplateRef<any>,
        private viewContainer: ViewContainerRef
    ) {}

    @Input() set hasPermission(condition: boolean) {
        if (!condition amp;amp; !this.hasView) {
            this.viewContainer.createEmbeddedView(this.templateRef);
            this.hasView = true;
        } else if (condition amp;amp; this.hasView) {
            this.viewContainer.clear();
            this.hasView = false;
        }
    }
}
  

И это называется так:

         <button
            class="btn btn-dark"
            (click)="navigateToSingleCompany()"
            [translate]="'register.text.company'"
            *appHasPermission="true"
        >
            Company
        </button>
  

Я добавил директиву в объявления и в экспорт внутри общего модуля, и я импортировал общий модуль во все другие модули, которые я использую. Я не уверен, что еще делать.

Проблема заключалась в том, что имя селектора не соответствовало имени ввода, таким образом, оно заработало:

 import { Directive, Input, TemplateRef, ViewContainerRef } from "@angular/core";

@Directive({
    selector: "[appHasPermission]",
})
export class HasPermissionDirective {
    private hasView = false;

    constructor(
        private templateRef: TemplateRef<any>,
        private viewContainer: ViewContainerRef
    ) {}

    @Input() set appHasPermission(condition: boolean) {
        if (!condition amp;amp; !this.hasView) {
            this.viewContainer.createEmbeddedView(this.templateRef);
            this.hasView = true;
        } else if (condition amp;amp; this.hasView) {
            this.viewContainer.clear();
            this.hasView = false;
        }
    }
}
  

Все должно быть хорошо, если вы используете директиву без префикса ‘*’:

 <button
        class="btn btn-dark"
        (click)="navigateToSingleCompany()"
        [translate]="'register.text.company'"
        appHasPermission [hasPermission]="true"
    >
        Company
    </button>