在{{}}(Curly Brackets)中使用函数调用是一个好习惯吗？

Question

在{{}}(Curly Brackets)中使用函数调用是一个好习惯吗？

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

PS.我需要在textarea中显示HTML内容,这就是我在组件内部执行html的原因.

Answer 1

你的问题的答案是:它取决于.

如果函数的执行时间很短,那很好.如果该功能包括许多复杂的计算,需要很长时间才能完成,那么它可能会导致用户体验出现严重问题.

这是Angular团队在其官方文件中所说的:

快速执行

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

表达式应该快速完成或用户体验可能会拖累,尤其是在较慢的设备上.在计算成本昂贵时考虑缓存值.

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

Answer 2

车把内的功能调用(双重卷曲)是合法的.但是,如果您console.log在函数中,您将看到它经常调用,以便尽可能保持轻量级,或者如果它是纯函数则记住它.见lodash memoize.

如果函数没有参数(或者可以重写为不接受参数),那么你可以使用TypeScript getter,如下所示:

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

现在你可以{{ something }}在HTML模板中使用了.值得放置一个console.log这里,以查看它是否比相应的函数调用次数少.