[angular] Angular-템플릿에서 * ngIf 대 간단한 함수 호출

이것은 꽤 의견이 많은 답변입니다.

이와 같은 기능의 사용은 완벽하게 허용됩니다. 템플릿을 훨씬 명확하게 만들며 오버 헤드가 크게 발생하지 않습니다. JB가 이전에 말했듯이 단위 테스트를위한 훨씬 더 나은 기반을 설정합니다.

또한 템플릿에있는식이 변경 감지 메커니즘에 의해 함수로 평가되므로 템플릿이나 구성 요소 논리에 있는지 여부는 중요하지 않습니다.

함수 내부의 논리를 최소한으로 유지하십시오. 그러나 이러한 기능으로 인해 발생할 수있는 성능 영향에 대해주의를 기울이는 경우 어쨌든 모범 사례로 간주되는 ChangeDetectionStrategyto OnPush를 사용하는 것이 좋습니다. 이를 통해주기마다 함수가 호출되는 것은 아니며 Input변경, 템플릿 내에서 일부 이벤트가 발생 하는 경우에만 해당됩니다 .

_{(더 이상 다른 이유를 알지 못하기 때문에 etc 사용)} .

개인적으로 Observables 패턴을 사용하는 것이 더 좋다고 생각하고 async파이프 를 사용할 수 있으며 새로운 값이 나오면 템플릿이 다시 평가됩니다.

userIsAuthorized$ = combineLatest([
  this.user$,
  this.isAuthorized$
]).pipe(
  map(([ user, authorized ]) => !!user && !!user.name && authorized),
  shareReplay({ refCount: true, bufferSize: 1 })
);

그런 다음 템플릿에서 다음과 같이 사용할 수 있습니다.

<ng-template *ngIf="userIsAuthorized$ | async">
 ...
</ng-template>

또 다른 옵션은 ngOnChanges구성 요소에 대한 모든 종속 변수가 입력이고 특정 템플릿 변수를 계산하는 많은 논리가있는 경우를 사용하는 것입니다 (표시하지 않은 경우).

export class UserComponent implements ngOnChanges {
  userIsAuthorized: boolean = false;

  @Input()
  user?: any;

  @Input()
  isAuthorized?: boolean;

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.user || changes.isAuthorized) {
      this.userIsAuthorized = this.userCheck();
    }
  }

  userCheck(): boolean {
    return this.user && this.user.name && this.isAuthorized || false;
  }
}

다음과 같이 템플릿에서 사용할 수 있습니다.

<ng-template *ngIf="userIsAuthorized">
 ...
</ng-template>

답변

user$;
isAuth$
userCheck$;

userCheck$ = user$.pipe(
switchMap((user) => {
    return forkJoin([of(user), isAuth$]);
 }
)
.map(([user, isAuthenticated])=>{
   if(user && user.name && isAuthenticated){
     return true;
   } else {
     return false;
   }
})
);

inline bool userCheck()
{
    return isAuthorized;
}