Хорошо ли использовать вызовы функций внутри {{}} (Curly Brackets)?

Есть какой-либо способ сделать это? в компоненте, например (возможно, используя ngOnChanges или что-то в этом ngOnChanges...)

шаблон

<div class="container">
    {{ bootstrap() }}
    {{ validate() }}  
    <textarea class="form-control">{{ fullHtml }}</textarea>
    <button (click)="copy()" class="btn btn-primary">Click to Copy HTML</button>
    <textarea class="form-control">{{ validator }}</textarea>
    <button (click)="copy()" class="btn btn-warning">Click to Copy Validate</button>

    <button class="btn btn-danger" (click)="add()">Add page and input</button>
</div>

Составная часть

class HomeComponent {
    fullHtml = "";
    validator = "";
    pages = [{
        "name": "Page 1"
    },{
        "name": "Page 2"
    }];

    inputs = [{
        "name": "input_1",
        "required": true
    },{
        "name": "input_2",
        "required": false
    }];

    public bootstrap() {
        this.fullHtml = this.pages.map((page, pageNumber) => {
            return '<div class="row">' +
                page.name +
                '</div>'
        }).join('')
    }

    public validate(){
        this.validator = this.inputs.map((input, i) => {
            return '"' + input.name + '" => [' + (input.required? 'required': 'nullable') + '],\n';
        }).join('')
    }

    public copy(){
        alert("under construction");
    }

    public add(){
        this.pages.push({
            name: "page 3"
        });
        this.inputs.push({
            "name": "input_3",
            "required": true
        });
    }
}

https://jsfiddle.net/1hk7knwq/10283/

пс. Мне нужно отображать содержимое HTML в текстовом поле, поэтому я делаю html внутри компонента.

Ответ 1

Ответ на ваш вопрос: это зависит.

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

Это то, что сказала Угловая команда в своем официальном документе:

Быстрое выполнение

Угловое выполнение шаблонных выражений после каждого цикла обнаружения изменений. Замена циклов обнаружения инициируется многими асинхронными действиями, такими как обещания, результаты HTTP, события таймера, нажатия клавиш и перемещения мыши.

Выражения должны заканчиваться быстро или пользовательский интерфейс может перетащить, особенно на более медленные устройства. Рассмотрите кеширование значений, когда их вычисления дороги.

Для справки: https://angular.io/guide/template-syntax#quick-execution

Ответ 2

Функциональные вызовы внутри рулей (двойные завитки) являются законными. Однако, если вы console.log в функции, которую вы увидите, она часто называется так, чтобы она была максимально облегченной или напоминала ее, если она является чистой функцией. См. Lodash memoize.

Если функция не имеет аргументов (или может быть переписана, чтобы принимать аргументы без аргументов), вы можете использовать получатель TypeScript вместо этого:

get something() {
  // do some code here
  // return 5
}

И теперь вы можете просто использовать {{ something }} в шаблоне HTML. Стоит разместить console.log здесь, чтобы узнать, называется ли это меньше времени, чем эквивалент функции.

Ответ 3

Угловое имеет очень удобную функцию, которая позволяет привязывать данные непосредственно к результату вызова метода. Используя синтаксис привязки шаблона Angulars для назначения атрибута методу, результаты будут пересчитываться с каждым циклом обнаружения изменений. Хотя это может быть удобно, оно также добавляет результаты этих вычислений к стоимости каждого цикла обнаружения изменений. Эта стоимость может значительно повлиять на отзывчивость приложений, например, когда привязка к методу сочетается с ngFor. Как правило, есть два подхода к повышению производительности: предварительная вычисление результатов или реализация метода как чистого канала.

Наиболее распространенной ситуацией, в которой ngFor сочетается с вызовом метода, является выполнение вычисления на основе каждой отображаемой записи. Вместо того, чтобы пересчитывать отображаемое значение при каждом обнаружении изменений, часто есть возможность рассчитать дополнительные свойства по мере необходимости. Например, рассмотрим следующий код:

<ul>
  <li *ngFor="let instractor of instractorList">
    <span>Upccoming classes {{numClasses(instractor)}}</span>
  </li>
</ul>

Простая привязка шаблона, которая выполняет numClasses для каждой записи в списке инструкторов в каждом цикле обнаружения изменений

Класс компонента поддержки для шаблона передает свои данные без предварительной обработки. Следующая реализация определяет метод вызова из шаблона

<ul>
  <li *ngFor="let instractor of instractorList">
    <span>Upccoming classes {{instractor.numClasses}}</span>
  </li>
</ul>

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