Angular 6 - предотвращение изменения функции при нажатии

Question

У меня есть function, который возвращает случайное число:

@Component({
    selector: '...',
    templateUrl: '...',
    styleUrls: ['...'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class Component {

    randomPerc(min, max): number {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }

}

И я использую эту функцию исключительно в HTML-шаблоне, как это (во многих местах):

<div [style.width.%]='randomPerc(20, 70)'></div>

«Проблема» в том, что процент меняется, как только я нажимаю где-то на странице.Но я хочу предотвратить это поведение - Я хочу, чтобы процент был статическим после первого вызова функции .

Я думал о создании постоянной глобальной переменной, но это не сработаеткак я использую эту функцию много раз.(Я хочу другое случайное число для каждого использования)

Answer 1

Метод 1 - Кэширование значений в объекте карты

Вы можете вызвать метод с различным ключом для каждого элемента, кэшировать результат в объекте Map и повторно использоватьэто когда метод вызывается снова для того же элемента:

<div [style.width.%]="randomPerc('key1', 20, 70)"></div>
<div [style.width.%]="randomPerc('key2', 10, 50)"></div>
<div [style.width.%]="randomPerc('key3', 25, 90)"></div>

<div *ngFor="let item of items; let i = index">
  <div [style.width.%]="randomPerc('item' + i, 25, 90)"></div>
</div>

private widths = new Map<string, number>();

randomPerc(key: string, min: number, max: number): number {
  if (!this.widths.has(key)) {
    this.widths.set(key, Math.floor(Math.random() * (max - min + 1) + min));
  }
  return this.widths.get(key);
}

См. этот стек для демонстрации.

Метод 2 - Используйте пользовательскую директиву

Альтернативой является определение пользовательской директивы.В приведенном ниже примере минимальная и максимальная ширина в процентах определяются как два входных параметра со значениями по умолчанию.Поскольку атрибут style установлен для элемента только в ngOnInit, он не изменяется впоследствии при обнаружении изменений.

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

@Directive({
  selector: "[randomWidth]"
})

export class RandomWidthDirective implements OnInit {

  @Input() minRandom: number = 20;
  @Input() maxRandom: number = 70;

  constructor(private el: ElementRef) { }

  ngOnInit() {
    let value = Math.floor(Math.random() * (this.maxRandom - this.minRandom + 1) + this.minRandom);
    this.el.nativeElement.style.width = `${value}%`;
  }
}

Директива применяется к элементам в шаблоне с использованием параметров по умолчанию или переопределениемих с различными значениями:

<div randomWidth></div>
<div randomWidth [minRandom]="10"></div>
<div randomWidth [minRandom]="5" [maxRandom]="95"></div>

См. этот стек * блиц для демонстрации.