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

Question

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

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

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

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

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

以上都不够接受。但我找不到更好的方法来解决它。

希望各位大侠给点建议：）。

Answer 1

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

是的

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

我认为您使用它的方式并非本应如此。

来自文档：

微语法解析器对所有指令进行标题大小写，并在它们前面加上指令的属性名称，例如 ngFor。例如，ngFor 输入属性 of 和 trackBy 分别变为 ngForOf 和 ngForTrackBy。指令就是这样得知列表是英雄，而track-by函数是trackById。

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

底线是在您的问题的上下文中，微语法接受“表达式”，然后是可选的“键控表达式”，恐怕这些是您唯一的选择。

当然可以传递一个对象作为第一个表达式——类似于 ngIf——，不同之处在于你可以教你的指令如何评估表达式：

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

Answer 2

输入名称都需要以指令的选择器为前缀，后跟输入名称大写（即permissionIfExcept）。示例：

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

请注意，您使用的是前缀 uncapitalized 后面的名称（即except）。还要注意作业中的:。

显式语法（使用template）如下所示：

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

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

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

Plunker example

另请参阅NgFor 的source 作为示例。

Answer 3

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

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

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