Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 2186 razy

Wstęp

Na łamach stron tego działu opisywałem najróżniejsze dyrektywy, jakie można było wykorzystać do dynamicznego tworzenia treści strony. Co jednak, jeżeli zachodzi niczym nie okiełznana chęć (żeby nie powiedzieć potrzeba) stworzenia własnej dyrektywy, ułatwiającej jakże trudne życie programisty? Czy w ogóle da się zrobić takie dyrektywy? I co ważniejsze, czy mogą one rzeczywiście ułatwić życie programiście? Okazuje się, że tak. Wyobraź sobie bowiem, że chcesz móc przypisywać pewnym elementom HTML-a pewne style, lub nadpisywać ich zawartość dopisując do nich jakąś nową treść. A wszystko to zaprawdę powiadam wam za pomocą jednej małej prostej w użyciu dyrektywy o przyjaźnie brzmiącej nazwie. Tak, tak moi mili sen programisty się ziścił na naszych oczach!

Tworzenie dyrektywy

Utworzenie dyrektywy jest prostsze niż odebranie dzieciakowi lizaka (nie żebym kiedykolwiek próbował). Albowiem za prawdę powiadam wam, że wystarczy wpisać w konsoli polecenie:

ng g d ErrorStyle

by po chwili lub co najwyżej dwóch móc cieszyć się następującym plikiem error-style.directive.ts zawierającym następującą podstawową deklarację dyrektywy:

import { Directive } from '@angular/core'; @Directive({ selector: '[appErrorStyle]' }) export class ErrorStyle { constructor() {} }

Taka dyrektywa nie będzie nic robiła, czas więc najwyższy to zmienić:

import { Directive, ElementRef } from '@angular/core'; @Directive({ selector: '[appErrorStyle]' }) export class ErrorStyle { constructor(el: ElementRef) { el.nativeElement.style = 'color: red'; } }

Dyrektywy również wykorzystują haki cyklu życia komponentu, tak więc można powyższy kod zmodyfikować nieco:

import { Directive, ElementRef } from '@angular/core'; @Directive({ selector: '[appErrorStyle]' }) export class ErrorStyle { constructor(el: ElementRef) {} ngAfterViewInit() { this.el.nativeElement.style = 'color: red'; } }

Jeszcze lepszym rozwiązaniem jest wstrzyknięcie do konstruktora i wykorzystanie klasy Renderer2:

import { Directive, ElementRef, Renderer2, AfterViewInit } from '@angular/core'; @Directive({ selector: '[appErrorStyle]' }) export class ErrorStyle implements AfterViewInit { constructor(el: ElementRef, renderer: Renderer2) {} ngAfterViewInit() { this.renderer.setStyle(this.el.nativeElement, 'color', 'red'); } }

Dodawanie parametru sterującego? Proszę bardzo:

import { Directive, ElementRef, Renderer2, AfterViewInit } from '@angular/core'; @Directive({ selector: '[appErrorStyle]' }) export class ErrorStyle implements AfterViewInit { @Input('appErrorStyle') errorColor: string; constructor(el: ElementRef, renderer: Renderer2) {} ngAfterViewInit() { this.renderer.setStyle(this.el.nativeElement, 'color', this.errorColor ? this.errorColor : 'red'); } }

Dopisywanie danych do elementu jest również możliwe, jednakże ograniczające tylko do typowo HTML-owych styli.

import { Directive, ElementRef, Renderer2, AfterViewInit } from '@angular/core'; @Directive({ selector: '[appErrorStyle]' }) export class ErrorStyle implements AfterViewInit { @Input('appErrorStyle') errorColor: string; constructor(el: ElementRef, renderer: Renderer2) {} ngAfterViewInit() { this.el.nativeElement.innerHTML = '<b>BŁĄD:</b> ' + this.el.nativeElement.innerHTML; this.renderer.setStyle(this.el.nativeElement, 'color', this.errorColor ? this.errorColor : 'red'); } }

Wykorzystanie dyrektywy w kodzie

Czas wykorzystać dyrektywę w kodzie HTML w następujący sposób:

<div appErrorState>Error typu Error: 404 forbiddent!</div>

Powyższy kod wygeneruje element div-a z przypisanym przez dyrektywę appErrorState kolorem tekstu.

Wywołanie z parametrem również nie będzie nastręczało żadnych trudności:

<div appErrorState="green">Error typu Error: 404 forbiddent!</div>

Teraz kolor tekstu błędu powinien być zielonego koloru.