将 2 输入分配给指令答案

【问题标题】：assign 2 Input to a directive将 2 输入分配给指令
【发布时间】：2020-08-10 02:17:35
【问题描述】：

我有以下指令

@Directive({
  selector: "[appHasPermission]",
})
export class HasPermissionsDirective implements OnInit, OnDestroy {
  @Input("appHasPermission") uavId: number;
  @Input("fallbackTemplateRef") fallbackTemplateRef: TemplateRef<any>;

  private hasPermissions = false;
  private unsubscribe = new Subject<void>();

  constructor(
    private elementRef: ElementRef,
    private viewContainer: ViewContainerRef,
    private templateRef: TemplateRef<any>,
    private store$: Store<RootStoreState.IAppState>
  ) {}

  ngOnInit() {
    this.store$
      .pipe(takeUntil(this.unsubscribe), select(UserStoreSelectors.hasPermissionsOnUav(), { uavId: this.uavId }))
      .subscribe((hasPermissions) => {
        this.hasPermissions = hasPermissions;
        this.setElementOperation();
      });
  }

  setElementOperation(): void {
    if (this.hasPermissions) {
      this.viewContainer.clear();
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
      if (this.fallbackTemplateRef) {
        this.viewContainer.createEmbeddedView(this.fallbackTemplateRef);
      }
    }
  }

  ngOnDestroy() {
    this.unsubscribe.next();
    this.unsubscribe.complete();
  }
}

基本上，如果用户有权限，则显示元素，否则，显示作为输入提供的模板。

问题是，当我想使用它时：

  <button
    *appHasPermission="uav.uavId"
    [fallbackTemplateRef]="noPermission"
    mat-menu-item
    (click)="OnReleasePermission.emit(uav)"

我收到提示

无法绑定到“fallbackTemplateRef”，因为它不是“按钮”的已知属性

如果我使用喜欢

  <button
    [appHasPermission]="uav.uavId"
    [fallbackTemplateRef]="noPermission"
    mat-menu-item
    (click)="OnReleasePermission.emit(uav)"

没有 TemplateRef 的提供者，使用 *

为什么会这样？在文档中https://angular.io/guide/attribute-directives#bind-to-a-second-property 这应该可以工作

【问题讨论】：

标签： angular

【解决方案1】：

您所指的文档是针对属性指令的。结构指令有不同的gramar

*:prefix="( :let | :expression ) (';' | ',')? ( :let | :as | :keyExp )*"

您应该查看 keyExp。

keyExp = :key ":"? :expression ("as" :local)? ";"?

这意味着您应该按如下方式传递您的第二个输入：

<button
  *appHasPermission="uav.uavId; fallbackTemplateRef: noPermission"
  mat-menu-item
  (click)="OnReleasePermission.emit(uav)"

或扩展形式：

<ng-template [appHasPermission]="uav.uavId" [fallbackTemplateRef]="noPermission"> 
  <button mat-menu-item
    (click)="OnReleasePermission.emit(uav)"

另见：

What is the exact grammar for Angulars structural directives

【讨论】：