Angular 8 - 无法使用指令 - 无法绑定,因为它不是已知的 属性
Angular 8 - Cannot use directives - can't bind since it is not a known property
我创建了一个非常简单的指令(直接来自文档只是为了让它工作),但是,我不断收到此错误:
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 && !this.hasView) {
this.viewContainer.createEmbeddedView(this.templateRef);
this.hasView = true;
} else if (condition && this.hasView) {
this.viewContainer.clear();
this.hasView = false;
}
}
}
它的名字是这样的:
<button
class="btn btn-dark"
(click)="navigateToSingleCompany()"
[translate]="'register.text.company'"
*appHasPermission="true"
>
Company
</button>
我已经在共享模块的声明和导出中添加了该指令,并且我已经将共享模块导入到我使用的每个其他模块中。我不知道还能做什么。
如果你使用不带'*'前缀的指令应该没问题:
<button
class="btn btn-dark"
(click)="navigateToSingleCompany()"
[translate]="'register.text.company'"
appHasPermission [hasPermission]="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 && !this.hasView) {
this.viewContainer.createEmbeddedView(this.templateRef);
this.hasView = true;
} else if (condition && this.hasView) {
this.viewContainer.clear();
this.hasView = false;
}
}
}
我创建了一个非常简单的指令(直接来自文档只是为了让它工作),但是,我不断收到此错误:
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 && !this.hasView) {
this.viewContainer.createEmbeddedView(this.templateRef);
this.hasView = true;
} else if (condition && this.hasView) {
this.viewContainer.clear();
this.hasView = false;
}
}
}
它的名字是这样的:
<button
class="btn btn-dark"
(click)="navigateToSingleCompany()"
[translate]="'register.text.company'"
*appHasPermission="true"
>
Company
</button>
我已经在共享模块的声明和导出中添加了该指令,并且我已经将共享模块导入到我使用的每个其他模块中。我不知道还能做什么。
如果你使用不带'*'前缀的指令应该没问题:
<button
class="btn btn-dark"
(click)="navigateToSingleCompany()"
[translate]="'register.text.company'"
appHasPermission [hasPermission]="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 && !this.hasView) {
this.viewContainer.createEmbeddedView(this.templateRef);
this.hasView = true;
} else if (condition && this.hasView) {
this.viewContainer.clear();
this.hasView = false;
}
}
}