[실전 어플리케이션 만들기] 6. Directive

일반적인 웹 애플리케이션에서 로그인 전과 후에 Header에 노출되는 UI가 달라집니다.

 

[로그인 전]

[로그인 후]

if/else 문법으로도 분기처리가 가능하지만, Angular에서 제공하는 Directive를 이용하면 코드의 가독성도 높아지기 때문에 Directive를 이용하기로 결정했습니다.

 

로그인 여부에 따라 AuthDirective를 구현합니다.

 

1) 로그인 여부에 따라 특정 템플릿에 대해 노출/비노출을 결정하는 AuthDirective를 구현합니다. 

 

[auth.directive.ts]

import {User} from '../../core/model/user.model';
import { AppState } from '../../store/app.states';
import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';
import { Store } from '@ngrx/store';
 
@Directive({
  selector: '[appAuth]'
})
export class AuthDirective {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef,
    private store: Store<AppState>) {
  }
 
  @Input()
  set appAuth(condition: boolean) {
    this.store.select('user').subscribe((user) => {
      if (user.isAuth === condition) {
        this.viewContainer.createEmbeddedView(this.templateRef);
      } else {
        this.viewContainer.clear();
      }
    });
  }
}

• 7라인 : selector는 템플릿(html)에서 사용할 프로퍼티명입니다.
• 11라인 : TemplateRef는 selector를 프로퍼티로 가진 템플릿을 가리킵니다. 
• 12라인 : ViewContainerRef는 실제로 노출되는 컨테이너입니다. 
• 18라인 : boolean타입인 condition은 템플릿에서 우변을 통해 주입되는 값입니다. 
• 19라인 : store에 저장했던 'user'를 구독합니다. 
• 20~24라인 : user.isAuth에 따라 ViewContainerRef에 TemplateRef를 삽입할지, ViewContainerRef를 비울지 결정합니다. 

 

2) AuthDirective의 selector인 appAuth를 이용해 템플릿을 구성합니다.

 

[header.component.html]

<mat-toolbar>
  <div id="toolbar-container">
    <a routerLink="/">
      <h1>Angular-Proto</h1>
    </a>
    <div id="button-area">
      <nav *appAuth="false">
        <button mat-stroked-button color="primary" routerLink="/"><mat-icon>home</mat-icon> HOME</button>
        <button mat-stroked-button color="accent" routerLink="/auth/loginForm"><mat-icon>play_circle_filled</mat-icon> LOGIN</button>
        <button mat-stroked-button color="primary" routerLink="/join"><mat-icon>group_add</mat-icon> JOIN</button>
      </nav>
      <nav *appAuth="true">
        <button mat-stroked-button color="primary" routerLink="/"><mat-icon>home</mat-icon> HOME</button>
        <button mat-stroked-button color="primary" routerLink="/mypage"><mat-icon>person</mat-icon> MYPAGE</button>
        <button mat-stroked-button color="primary" routerLink="/boardWrite"><mat-icon>assignment</mat-icon> WRITE</button>
        <button mat-stroked-button color="link" (click)="logout()"><mat-icon>clear</mat-icon> LOGOUT</button>
      </nav>
    </div>
  </div>
</mat-toolbar>
  

• 7,12라인 : 바로 위의 코드에서 boolean타입의 condition을 확인할 수 있는데, 그것이 *appAuth의 우변인 false/true입니다.

 

[reference]

https://angular.io/guide/structural-directives