[ Angular2 : Renderer ] View Control 예제

Angular2 에서 View Control 은 처음 공부하는 입장에서 상당히 헤깔릴 수 있다. JQuery 나 Javascript 에서 Dom에 접근하는 방법이 Angular2 에서는 통하지 않는 경우가 있다. 혹자는 jquery를 angular2 에서 사용할 경우에 angular2 자체 해결책을 사용하는 것보다 심하게는 수십배의 속도차이가 난다고도 하더라. 그러니, 과거의 습관은 버리고 Angular2 에서 자체적으로 어떻게 View Control 을 하는 지 익혀둘 필요가 있다.

아래는 링크에서 발췌해 정리한 것이다.

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

@Directive({
  selector: '[appMyRenderer]'
})
export class MyRendererDirective {
  private nativeElement: Node;
  constructor(private renderer: Renderer, private element: ElementRef) {
    this.nativeElement = element.nativeElement;

    let inputElement = this.renderer.createElement(this.nativeElement, 'input');

    this.renderer.setElementAttribute(inputElement, 'value', 'Hello from renderer'); //this. didn't work
    this.renderer.setElementProperty(inputElement,'value','Hello from rendere'); // this works

    this.renderer.invokeElementMethod(inputElement, 'focus', []);

    let buttonElement = this.renderer.createElement(this.nativeElement, 'button');
    this.renderer.createText(buttonElement, 'Click me!');

    //this.renderer.setElementProperty(buttonElement, 'disabled', true);

    this.renderer.listen(buttonElement, 'click', (event) => console.log(event));
    this.renderer.setElementClass(buttonElement, 'btn-large', true);
    this.renderer.setElementStyle(buttonElement, 'backgroundColor', 'yellow');
    // The target could be one of three: window, document, body
    this.renderer.listenGlobal("body", "click", () => console.log('Global event'));
    // This is equivalent to document.querySelector("input")
    let inputElement1 = this.renderer.selectRootElement("input");

    const pEleOne = this.renderer.createElement(this.nativeElement, "p");
    const pEleTwo = this.renderer.createElement(this.nativeElement, "p");
    this.renderer.createText(pEleOne, "Element one");
    this.renderer.createText(pEleTwo, "Element two");
    this.renderer.projectNodes(this.nativeElement, [pEleOne, pEleTwo]);

    this.renderer.attachViewAfter(inputElement, [pEleOne, pEleTwo]);
    this.renderer.detachView([pEleTwo]);

    //Animation
    //renderer.invokeElementMethod
  }
}

 

댓글 남기기