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

Question

我想用angular-permisssion实现类似的东西.并且需要控制元素的存在,我需要使用角度结构指令.

一开始,我认为这样的语法会起作用:

<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

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

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

请不要permissionIfExcept为作业.

显式形式看起来像

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

但except它可能看起来像

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

Plunker的例子

另请参见:示例来源https://github.com/angular/angular/blob/d4d3782d455a484e8aa26ec9a57ee2b4727bc1da/modules/%40angular/common/src/directives/ng_for.ts

Answer 2

@G\xc3\xbcnter Z\xc3\xb6chbauer 答案几乎是正确的。

\n\n

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

\n\n

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

\n

Answer 3

\n

那么就出现了一个问题：模板语法不支持纯键值输入：

\n

\n\n

真的

\n\n

\n

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

\n

\n\n

我认为你正在以一种不应该的方式使用它。

\n\n

来自文档：

\n\n

\n

微语法解析器对所有指令进行标题大小写，并使用指令的属性名称作为前缀，例如 ngFor。例如，ngFor 输入属性 of 和 trackBy 分别变为 ngForOf 和 ngForTrackBy。这就是指令如何获知列表是英雄以及跟踪函数是 trackById 的方式。

\n

\n\n

\n\n

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

\n\n

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

\n\n

当然可以传递一个对象作为第一个表达式\xe2\x80\x94，类似于 ngIf\xe2\x80\x94，区别在于你可以教你的指令如何计算表达式：

\n\n

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

\n