时间戳

首页 > 解决方案 > 在 {{}}（大括号）中使用函数调用是一种好习惯吗？

javascript - 在 {{}}（大括号）中使用函数调用是一种好习惯吗？

问题描述

在 {{}}（大括号）中使用函数调用是一种好习惯吗？

有没有办法做到这一点？例如，在组件内（可能使用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/

附言。我需要在 textarea 中显示 HTML 内容，这就是我在组件内执行 html 的原因。

标签： javascriptangular

解决方案

您的问题的答案是：视情况而定。

如果函数的执行时间很短，那很好。如果该功能包含许多复杂的计算，需要很长时间才能完成，那么可能会给用户体验带来严重的问题。

这是 Angular 团队在其官方文档中所说的：

快速执行

Angular 在每个变更检测周期后执行模板表达式。更改检测周期由许多异步活动触发，例如承诺解决方案、http 结果、计时器事件、按键和鼠标移动。

表达式应该快速完成，否则用户体验可能会拖累，尤其是在速度较慢的设备上。当计算成本很高时，考虑缓存值。

供参考：https ://angular.io/guide/template-syntax#quick-execution

推荐阅读