具有多个输入的角度结构指令在首次加载组件期间没有任何价值

Question

我创建了一个采用多个值的结构化指令。我遇到的问题是我添加的第二个参数没有在 accessControllRole @Input 中考虑。但该值存在于其自己的参数声明中。知道发生了什么以及如何获取第一个 @Input 中的值，即 accessControlRole。

这是代码。

@Directive({
  selector: '[accessControlRole]'
})
export class AccessControlRoleDirective implements OnInit {
  userProfile!: UserProfile;
  private _accessControlRolePermission!:string;

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainerRef: ViewContainerRef,
    private jwtAuthService: JwtAuthService,
    ) {
  }

  ngOnInit(): void {
  }

  @Input() set accessControlRole(roleAllowed: Permission[]) {
    this.jwtAuthService.user.subscribe(user => {
      if (user&&this._accessControlRolePermission) {
        this.userProfile = user;
        if(this._accessControlRolePermission === 'Approve'){
          console.log('yesssssssssssssssssssssss');
          this.viewContainerRef.createEmbeddedView(this.templateRef);
        }
      }
      else{
        console.log("_accessControlRolePermission value is empty");
      }
    });
  }

  @Input() set accessControlRolePermission(permission:string) {
    this._accessControlRolePermission = permission;
    console.log('accessControlRolePermission value::::',this._accessControlRolePermission);
  }
}

组件类，我这样称呼指令，

<ng-container *accessControlRole="this.userPermissionRoles;permission:'Approve'">
         <a class="btn btn-lg btn-success btn-block">Approve</a>
</ng-container>

在控制台中我看到这个输出

指令值为空

accessControlRolePermission 值:::: 批准

Answer 1

请移动模板渲染代码并仅设置值，在 getter 方法中，请参阅下面的工作示例！

import { CommonModule } from '@angular/common';
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[accessControlRole]',
  standalone: true,
})
export class AccessControlRoleDirective {
  userProfile!: any;
  private _accessControlRolePermission!: string;
  private roleAllowed: any = [];

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainerRef: ViewContainerRef
  ) {}

  ngOnInit(): void {
    const user = {};
    if (user && this._accessControlRolePermission) {
      this.userProfile = user;
      if (this._accessControlRolePermission === 'Approve') {
        console.log('yesssssssssssssssssssssss');
        this.viewContainerRef.createEmbeddedView(this.templateRef);
      }
    } else {
      console.log('_accessControlRolePermission value is empty');
    }
  }

  @Input() set accessControlRolePermission(permission: string) {
    this._accessControlRolePermission = permission;
    console.log(
      'accessControlRolePermission value::::',
      this._accessControlRolePermission
    );
  }

  @Input() set accessControlRole(roleAllowed: any[]) {
    this.roleAllowed = roleAllowed;
  }
}

堆栈闪电战