Question

我创建此指令用于用户对显示菜单项或隐藏菜单的验证权限

这是我的代码：

 @Directive({
    selector: '[Permission]'
    })
    export class Pemsittiondirective {

    @Input() AccessName: string;

    constructor(
        private templateRef: TemplateRef<any>,
        private viewContainerRef: ViewContainerRef,
        private permission: PermissionValidate
    ) {
        console.log(this.AccessName)
        this.show();
     }

    show(): void {
        console.log('in d')
        if (this.permission.validateAccessLevel(this.AccessName)) {

            this.viewContainerRef.createEmbeddedView(this.templateRef);

        } else {

            this.viewContainerRef.clear();

        }

    }

}

我在HTML中使用此指令：

                    <li [Permission]='User:Main' class="side-menu-items-item">
                    <div class="item-icon">
                        <i nz-icon nzType="team" nzTheme="outline"></i>
                    </div>
                    <div class="item-label">
                        <label>{{'DASHBOARD.MENU_ITEM.USER_MANAGER' | translate}}</label>
                    </div>
                </li>

[Permission]='User:Main'

和我在shared.module中的声明：

 declarations: [ShowErrorComponent,Pemsittiondirective],
  imports: [
    CommonModule,
    MaterialModule,

    ZorroModule,
  ],
  exports: [MaterialModule,Pemsittiondirective]
})

但是它不起作用，也没有进入Directive

出什么问题？我该如何解决呢？ 更新问题：

这是我的shared.module

 @NgModule({
  declarations: [ShowErrorComponent,Pemsittiondirective,EmailExistValidationDirective,UsernameValidationDirective],
  imports: [
    CommonModule,
    MaterialModule,

    ZorroModule,
  ],
  exports: [MaterialModule,Pemsittiondirective,ZorroModule ,ShowErrorComponent,EmailExistValidationDirective,UsernameValidationDirective]
})
export class SharedModule {
  static forRoot(): ModuleWithProviders {
    // Forcing the whole app to use the returned providers from the AppModule only.
    return {
      ngModule: SharedModule,
      providers: [ShowErrorComponent ,Pemsittiondirective , EmailExistValidationDirective ,UsernameValidationDirective/* All of your services here. It will hold the services needed by `itself`. */]
    };
  }
}

Answer 1

我认为问题在于将值传递给指令属性Directive="User:Main"。

在Angular的guide中，他们的操作如下：

@Directive({
    selector: '[appPermission]'
})
export class Pemsittiondirective {
    constructor(
        private templateRef: TemplateRef<any>,
        private viewContainerRef: ViewContainerRef,
        private permission: PermissionValidate
    ) {
    }

    @Input() set appPermission(accessName: string) {
        if (this.permission.validateAccessLevel(accessName)) {
            this.viewContainerRef.createEmbeddedView(this.templateRef);
        } else {
            this.viewContainerRef.clear();
        }
    }
}

指令使用者希望将真/假条件绑定到[appUnless]。这意味着该指令需要一个用@Input
装饰的appUnless属性。 指南中的角度说

正如@Stavm已经提到的-这是一个结构指令。因此，您将需要使用*。

然后您可以使用它：

<li *appPermission='"User:Main"' class="side-menu-items-item"></li>

以下是我的示例：https://stackblitz.com/edit/angular-gjewlg

此示例正在运行。

Answer 2

似乎您忘记了正在处理结构指令，因此，您需要使用模板。

简单来说，Angular团队以星号前缀的形式创建了一个语法糖：

  <v-stage
    ref="stage"
    class="konva-stage"
    :config="stageSize"
    :onMouseDown="onMouseDownHandler" <-- NOT THIS
    @mousedown="onMouseDownHandler" <-- THIS
  />

为您制作了一个小型演示：

https://stackblitz.com/edit/angular-uyfpty?file=src%2Fapp%2Fapp.component.html

Answer 3

首先，正如@Stavm已经提到的-它的结构指令。其次，您传递了字符串，但是传递了参数。您按如下所示传递字符串（双括号）：

*Permission="'User:Main'"

不输入指令

3 个答案: