[Angular] Angular directive 만들기

Angulr에서 문서에 따르면 Directive는 아래와 같이 작성한다.

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef) { }

  @Input() defaultColor: string;

  @Input('appHighlight') highlightColor: string;

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor || this.defaultColor || 'red');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

그리고 아래와 같이 사용한다.

<p [appHighlight]="color">Highlight me!</p>

<p [appHighlight]="color" defaultColor="violet">
  Highlight me too!
</p>

여기서 해맸던 부분은 파라미터를 여러개 받는 방법과 파라미터에 값을 전달하는 방법이다.

우선 파라미터를 여러개 받는 방법은 다음과 같다.

@Input('directiveName') directiveName: string;
@Input() param1: string;
@Input('param2') param2: string;

@Input 데코레이터와 함께 작성해야하며, 경우에 따라 명시적으로 이름을 줄 수 있다.

다음은 파라미터에 값을 전달해주는 부분 아래와 같다.

  • directiveName = "function" : "function"이라는 문자열이 전달
  • directiveName = "" : function의 코드가 문자열로 전달
  • [directiveName] = "function" : function 자체가 전달

기존에는 문자열을 사용해서 첫번째와 같이 사용하여도 문제가 없었는데 function을 전달하니 문제가 생기었다. 세번째와 같은 방버으로 사용하니 원하는 값이 제대로 전달되었다.

SmileCat

SmileCat
How do you define yourself?

[Openlayers] Render Event 정리

## 이벤트### [Map](http://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html)| event | module | note || :--: | -- | -- || [postcompose](...… Continue reading