Question

我想用angular-permisssion实现类似的功能。并且需要控制元素的存在，我需要使用有角度的structural directive。

一开始，我认为这样的语法会起作用：

$viewContentLoaded

然而，它不会那样工作。

此外，官方指南仅教您如何使用单个输入编写自定义结构指令。对于多输入，一些第三方教程涉及一些。但那是使用角度模板微语法来实现数据绑定。然后出现一个问题：模板语法不支持纯键值输入：

<h2 *permissionIf [permissionIfExcept]="'Read'">Except</h2>

它扩展到这个（这是非法的）：

<h2 *permissionIf="except: map.except；only: 'test'">Except</h2>

一个愚蠢的临时解决方案是添加一个无用的变量声明。

<h2 template="permissionIf except: map.except；only: 'test'">Except</h2>

另一个不方便的方法是使用模板元素来包装代码。

<h2 *permissionIf="let i;except: map.except；only: 'test'">Except</h2>

以上所有内容都不具备。但我找不到更好的解决方法。

希望有些人可以提出一些建议：）。

Answer 1

输入名称需要全部以指令的选择器为前缀：

  @Directive({
    selector: '[permissionIf]'
  })
  export class PermissionIfDirective implements AfterContentInit {

    private _permissionIf:string[];
    @Input() 
    set permissionIf(value: string[]) {
      this._permissionIf=value;
      console.log('permissionIf: ', value);
    }

    private _except:string;
    @Input() 
    set permissionIfExcept(value: string) {
      this._except = value;
      console.log('except: ', value);
    }
  }

并像

一样使用它

<div *permissionIf="permissions;except:'Read'"></div>

请不要:进行作业。

显式表单看起来像

<template [permissionIf]="permissions" [permissionIfExcept]="'Read'">
  </div></div>
</template>

但<ng-container>可能看起来像

<ng-container *permissionIf="permissions;except:'Read'">
  <div></div>
</ng-container>

Plunker example

另请参阅NgFor的来源https://github.com/angular/angular/blob/d4d3782d455a484e8aa26ec9a57ee2b4727bc1da/modules/%40angular/common/src/directives/ng_for.ts

Answer 2

@GünterZöchbauer答案几乎是正确的。

实际上，现在要使他的答案正常工作，您需要显式重命名辅助@Input名称。所以它应该是：

@Input("permissionIfExcept") 
set permissionIfExcept(value: string) {
  this._except = value;
  console.log('except: ', value);
}

Answer 3

然后发生一个问题：模板语法不支持纯键值输入：

是

一个愚蠢的临时解决方案是添加一个无用的变量声明。

我认为您使用它的目的不是本意。

从文档中

microsyntax解析器标题对所有指令进行大小写，并在其前面加上指令的属性名称，例如ngFor。例如，ngFor输入属性of和trackBy分别变为ngForOf和ngForTrackBy。这样，该指令便知道列表是英雄，而跟踪功能是trackById。

https://angular.io/guide/structural-directives#microsyntax-examples

最重要的是，在您的问题中，微语法接受“表达式”，然后是可选的“键表达式”，恐怕这是您唯一的选择。

当然可以将对象作为第一个表达式传递（类似于ngIf），不同之处在于您可以教您的指令如何计算该表达式：

*permissionIf="{ only: 'whatever', except: ['things', 'stuff'] }"

如何使用具有多个输入的Angular结构指令

3 个答案: