Question

我已经构建了一个“访问级别”＆＃39;角度4中的指令与* ngIf类似，但在不同的权限级别上。

@Directive({
  selector: '[accessLevel]'
})
export class AccessLevelDirective {
  private levelToPredicateMapper: {[id: string] : () => Observable<boolean>} = {};
  private isAuthorized: boolean;

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef,
    private readonly credentialsStorage: CredentialsStorageService,
    private readonly authentication: AuthenticationService) {

    this.createAccessLevelToPredicatesMapper();
  }

  @Input() set accessLevel(level: string) {
    if (level == null) {
      return;
    }

    let hasAccessLevelFunc = this.levelToPredicateMapper[level];
    if (hasAccessLevelFunc == null) {
        this.viewContainer.clear();
        return;
    }

    hasAccessLevelFunc().subscribe(hasAccessLevel => {
      this.buildOrDestroyView(hasAccessLevel);
    })
  }

  @Input() set roles(roles: [string]) {
     this.authentication.isAuthenticated()
      .subscribe(isAuthenticated => {

        let isValidRolesArray = roles != null && Array.isArray(roles) && roles.length > 0;
        let isUserHasOneOfTheRoles = isAuthenticated && 
            isValidRolesArray && 
            this.credentialsStorage.get() &&
            some(this.credentialsStorage.get().roles , role => roles.indexOf(role) > -1);
        this.buildOrDestroyView(isUserHasOneOfTheRoles);
      })
  }

  private buildOrDestroyView(isAuthorized: boolean) {
    let isStateChanged = isAuthorized !== this.isAuthorized;
    if (!isStateChanged) return;
    this.isAuthorized = isAuthorized;

    if (isAuthorized) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }

  private createAccessLevelToPredicatesMapper() {
    this.levelToPredicateMapper['all'] = () => Observable.of(true);
    this.levelToPredicateMapper['guest'] = () => this.authentication.isAuthenticated().map(isAuth => !isAuth);
    this.levelToPredicateMapper['authenticated'] = () => this.authentication.isAuthenticated()
  }
}

我的问题是当我在html中使用它时。为了绑定到角色属性，我需要用ng-template包装元素。

<!--Without [roles]-->
<a class="nav-item nav-link text-uppercase" *accessLevel="'authenticated'">
  ...         
</a>
<!--with [roles]-->
<ng-template accessLevel [roles]="['admin']">
  ...
</ng-template>

有没有办法可以绑定角色而无需用ng-template包装元素？

Answer 1

当输入名称与选择器

相同时

<input *accessLevel="['admin']" ...

应该有效

否则输入需要

@Input() set accessLevelRoles(roles: [string]) {

然后

<input *accessLevel="roles:['admin']" ...

应该有用。

Angular 4-如何将属性绑定到*指令

1 个答案: