且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Angular2在模板和变化检测中起作用

更新时间:2023-02-06 16:04:44

You can make AuthService.isAuthorized() method returns a promise:

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

You can call this method on your ngOnInit of a component (Therefore it will be called once). You pass the return value to a new variable (e.g. isAuthorized) in the component and use this variable in the template instead.

@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;
    });
  }
}

In the template you can just use isAuthorized variable.

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

Edit: If AuthService.isAuthorized() needed to be called only once but for more than one element, code like these may suits your need:

@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;
    });
  }
}

And in your template:

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

相关阅读

技术问答最新文章