전체적으로 사용되는 shared [뒤로가기] 버튼 제작

앵귤러에선 directive 라는게 있는데,

 

directive란 html의 확장 기능으로, 앵귤러에서 특정 요소를 선택하고 해당 요소의 동작을 조작하기 위해 사용됩니다.

디렉티브는 html 요소에 앵귤러의 특별한 동작을 부여하는 역할을 하고, 디렉티브를 사용하여 웹 페이지의 동적인 부분을 생성하고 관리가 가능합니다.

 

내장 디렉티브 종류로는 ngFor 나, ngIf 가 있습니다. (vue.js 같은 경우엔 v-if 나 v-for 같은 디렉티브와 같은 움직임을 해요.)

이런 걸 나만의 라이브러리로 조금씩 만들면 어떨가 싶어서 만들어 보고 있는데,

첫번재로 뒤로가기 버튼

 

어디서든 이용할 수 있게 끔 뒤로가기 directive를 만들었습니다.

import { Location } from '@angular/common';
import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[lfBack]'
})
export class BackDirective {

  constructor(
    private location: Location,
  ) {}

  @HostListener('click')
  async onClick() {
    this.location.back();
  }

 

위같은 컴포넌트를 만들고 export 선언하게 되면, html에서 이용되는 예시는 이렇습니다.

        <!-- lfBack 을 넣어주면 뒤로가기 기능을 가진 img가 생성됨 -->
    <img lfSrc="/assets/images/icons/slide-arrow-left.png" alt="icon" lfBack>