Ангулар проблема с директивой

Question

Хочу узнать как можно прописать скрипт внутри OnInit более надежным способом. Спасибо за помощь!

 import { Directive, ElementRef, Input, Renderer2, OnInit, AfterViewInit } from '@angular/core';
    
    @Directive({
      selector: '[appTimeStamp]'
    })
    export class TimeStampDirective implements OES_element_index_uint {
    
      @Input('appTimeStamp') time!: string;
    
      constructor(private elementRef: ElementRef, private renderer: Renderer2) {
      }
    
      ngOnInit(): void {
        let timeSpan: HTMLSpanElement = this.renderer.createElement('span');
        timeSpan.innerText = this.getTimestamp(this.time);
        this.renderer.appendChild(this.elementRef.nativeElement, timeSpan);
      }
    
      getTimestamp = (time: string) => {
        console.log(time);
        var sec = Date.parse(time) / 1000;
        var min = sec / 60;
        var hour = min / 60;
        var day = Math.floor(hour / 24) + ' дней ' + Math.floor(hour % 24) + ' часов ' + Math.floor(min % 60) + ' минут';
        return day;
      };
    }

Answer 1

Если вам просто нужно преобразовать строку например такого вида 2022-07-22T22:26:23+0000(дата в формате ISO 8601), то лучше использовать Pipe.

Использовать Directive будет излишним, т.к это лишние манипуляции с DOM, что замедлит рендеринг. Вам же не нужно менять стили или добавлять какие-то элементы.

В Angular Pipe предназначен для трансформации данных. В документации написано:

Pipes — это простые функции, которые можно использовать в шаблоне, чтобы принимать входное значение и возвращать преобразованное значение. Pipes полезны тем, что вы можете использовать их во всем приложении, объявляя каждый только один раз.

Так вы сможете преобразовать строку 2022-07-22T22:26:23+0000 в удобный вам вид, например в 0 дней 20 часов 9 минут.

Для этого создадим пайп командой:

ng g p timestamp

Angular CLI создаст файл timestamp.pipe.ts и добавит TimestampPipe в AppModule.

timestamp.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'timestamp',
})
export class TimestampPipe implements PipeTransform {
  transform(value: string): string {
    const sec = (Date.now() - Date.parse(value)) / 1000;
    const min = sec / 60;
    const hour = min / 60;
    return (
      Math.floor(hour / 24) +
      ' дней ' +
      Math.floor(hour % 24) +
      ' часов ' +
      Math.floor(min % 60) +
      ' минут'
    );
  }
}

app.component.html

<p>{{ dateString | timestamp }}</p>

Ссылка на StackBlitz, где показана работа и директивы и пайпа в одном компоненте.

БЛОГ НА HUSL

Ангулар проблема с директивой

Ответы (1 шт):