Является ли хорошей практикой использование вызовов функций внутри {{}} (фигурные скобки)?

Question

Полезно ли использовать вызовы функций внутри {{}} (фигурные скобки)?

Есть ли способ сделать это?например, внутри компонента (возможно, используя 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 внутри компонента.

Answer 1

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

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

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

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

Answer 2

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

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

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

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

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

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

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

Answer 3

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

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

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

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

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

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

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