模板中的 Angular2 函数和更改检测

Question

我试图在服务中构建一个方法，用于检查是否应根据当前用户的权限向当前用户显示导航按钮（我知道这只是装饰性的“安全性”）。因此，这是放置在模板内的按钮

<button [routerLink]="['/some/where']"
        *ngIf="AuthService.isAuthorized(['some', 'where'])">
    Personen
</button>

AuthService.isAuthorized 方法使用提供的数组遍历所有可用路由并从特定路由的数据对象中获取所需的权限：

{
    path: 'some',
    component: SomeComponent,
    data: {
        permissions: [
            "read:some",
            "edit:some"
        ]
    },
    children: [
        {
            path: 'where',
            component: SomeComponent,
            data: {
                permissions: [
                    "read:where"
                ]
            }
        },
    ]
}

所以在这种情况下，当前登录用户需要权限["read:some","edit:some","read:where"]，以便向他显示按钮。 工作至今！

但是由于该函数在模板内部被调用，因此由于角度变化检测而被多次调用。我怎样才能更改我的代码，以便只调用一次函数？如果它只在在身份验证完成后将所有分配给经过身份验证的用户的权限写入 AuthService.permissions

时才被调用，那就更好了

Answer 1

你可以让 AuthService.isAuthorized() 方法返回一个承诺：

@injectable()
export class AuthService {
  ...
  isAuthorized(arr: string[]): Promise<boolean> {
    return new Promise(resolve =>{
      // your logic here
      resolve(yourResult);
    });
  }
  ...
}

您可以在组件的ngOnInit 上调用此方法（因此它将被调用一次）。您将返回值传递给组件中的新变量（例如isAuthorized），并在模板中使用此变量。

@Component({
selector: "your-component",
templateUrl: "yourTemplate.html"
})
export class YourComponent implements OnInit {
  isAuthorized: boolean;

  constructor(private authService: AuthService) {}

  ngOnInit() {
    this.authService.isAuthorized(['some', 'where']).then(result => {
      this.isAuthorized = result;
    });
  }
}

在模板中你可以只使用isAuthorized 变量。

<button [routerLink]="['/some/where']"
    *ngIf="isAuthorized">
Personen
</button>

编辑： 如果 AuthService.isAuthorized() 只需要调用一次但不止一个元素，这样的代码可能适合您的需要：

@Component({
selector: "your-component",
templateUrl: "yourTemplate.html"
})
export class YourComponent {
  isObjectAuthorized = {} as {
    isFirstAuthorized: boolean;
    isSecondAuthorized: boolean;
  };  

  constructor(private authService: AuthService) {}

  checkForAuthorization(isElementAuthorized, arr: string[]) {
    if (isElementAuthorized !== undefined) {
      return;
    }

    this.authService.isAuthorized(arr).then(result => {
      isElementAuthorized = result;
    });
  }
}

在你的模板中：

<button [routerLink]="['/some/where']"
    *ngIf="checkForAuthorization(isObjectAuthorized.isFirstAuthorized, ['some', 'where'])">
First
</button>
<button [routerLink]="['/some/where']"
    *ngIf="checkForAuthorization(isObjectAuthorized.isSecondAuthorized, ['some', 'where', 'else'])">
Second
</button>