![](/img/trans.png)
[英]Angularjs: Using routing - the custom directive is not compiled or not recognized
[英]Custom directive is not recognized in Angular 2
我创建了一个自定义指令并将其添加到我的 app.module 的声明中。 但是当我在我的组件中使用它时,它给了我一个错误:
嵌入模板上的任何指令均未使用属性绑定 hasClaim。 确保属性名称拼写正确,并且所有指令都在“@NgModule.declarations”.ng 中列出
这就是我创建指令的方式:
import { Directive, TemplateRef, ViewContainerRef, Input } from '@angular/core';
import { SecurityService } from './security.service';
@Directive({
// tslint:disable-next-line: directive-selector
selector: '[hasClaim]'
})
export class HasClaimDirective {
constructor(
private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef,
private ss: SecurityService,
) { }
@Input() set hasClaim(claimType: any) {
debugger;
if (this.ss.hasClaim(claimType)) {
this.viewContainer.createEmbeddedView(this.templateRef);
} else {
this.viewContainer.clear();
}
}
}
这就是我实现它的方式:
<ul class="nav">
<ng-container *ngIf="securityObject.isAuthenticated">
<li *ngFor="let menuItem of menuItems" routerLinkActive="active" class="{{menuItem.class}}">
<a [routerLink]="[menuItem.path]" *hasClaim="'Admin'"> <=== THIS IS THE DIRECTIVE
<i class="nc-icon {{menuItem.icon}}"></i>
<p>{{menuItem.title}}</p>
</a>
</li>
</ng-container>
<ng-container *ngIf="!securityObject.isAuthenticated">
<li routerLinkActive="active" class="">
<a routerLink="/login">
<i class="nc-icon nc-key-25"></i>
<p>Login</p>
</a>
</li>
</ng-container>
<ng-container *ngIf="securityObject.isAuthenticated">
<li routerLinkActive="active" class="" (click)="logout()">
<a routerLink="/login">
<i class="nc-icon nc-lock-circle-open"></i>
<p>Logout</p>
</a>
</li>
</ng-container>
</ul>
问题是您在app.module.ts
声明了指令,并且您想在navBarModule.module.ts
声明的组件中navBarModule.module.ts
如果只在 navbar.component 中使用该指令,请在 NavBarModule.module 中声明该指令
否则,您可以创建一个模块,例如utils.module
,您可以在其中声明和导出指令,并在具有需要指令的组件的模块中导入
import { NgModule } from '@angular/core';
import {HasClaimDirective} from './hasclaim.directive'
@NgModule({
declarations: [ HasClaimDirective ],
exports:[HasClaimDirective]
})
export class UtilsModule { }
在导航模块中
@NgModule({
imports: [ BrowserModule, FormsModule,UtilsModule ],
declarations: [ NavBarComponent ],
exports:[NavBarComponent ]
})
export class NavBarModule { }
仔细观察错误信息:
嵌入模板上的任何指令均未使用属性绑定 hasClaim。 确保属性名称拼写正确,并且所有指令都在“@NgModule.declarations”.ng 中列出
可能的修复 1:
看看他们说的这一行:
directives are listed in the "@NgModule.declarations
修复是:转到您的app.module.ts ,然后导入您的指令并在导入后将其添加到声明数组
例如:这是在我的项目中
我这里有进口代表。
我猜你的错误是想告诉你 - 导入你的指令然后把它放在app.module.ts
声明数组中
可能的修复 2:
您不应该在 html 中的指令之前使用星号 (*)
正如 angular doc建议的那样,阅读这个文档页面可能会满足您的需求
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.