时间戳

首页 > 解决方案 > Angular 2 中无法识别自定义指令

javascript - 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>

在此处输入图像描述

在此处输入图像描述

标签： javascriptangulartypescriptangular2-directives

解决方案

问题是你在声明指令app.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 { }

推荐阅读