为啥 Angular 2+ innerHTML 在单个语句中多次调用方法，如何解决这个问题

Posted 2023-05-07

【中文标题】为啥 Angular 2+ innerHTML 在单个语句中多次调用方法，如何解决这个问题

【英文标题】：Why Angular 2+ innerHTML is calling method multiple times in a single statement, How to solve this为什么 Angular 2+ innerHTML 在单个语句中多次调用方法，如何解决这个问题

【发布时间】：2019-08-05 07:26:41

【问题描述】：

我有这样的模板视图。

<p [innerhtml]="myfunction()"></p>

而且，ts 文件是这样的

import  Component  from '@angular/core';

@Component(
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
)
export class AppComponent  
  name = 'Angular';

  myfunction()
    alert(name);
    return '<div>abcd</div>';

  

这是一个从html调用通过innerhtml渲染html内容的简单方法，这里myfunction()多次调用，我收到多个警报，谁能帮我解决这个问题。

stackblitz 是 link

提前致谢

【问题讨论】：

这是正常行为：在显示周期中，Angular 将“重新检查”所有内容的状态，以防自上一步以来发生变化。最好不要调用函数，而是将值放在属性中。如果计算可能很复杂，请在ngOnInit 中调用它并将结果存储在一个属性中，并在模板中显示该属性。不将此作为答案发布，因为我不确定您是在问“为什么”会发生这种情况还是有解决方法。

它被多次调用，因为它在每个应用程序滴答声中调用，角度无法检测您的方法是否是幂等的。

我知道，angular会多次重新检查状态，在我的项目中，我通过innerHtml渲染输入元素，当我在输入框中输入内容时，它再次调用相同的方法，我需要获取输入元素中输入的值，这个 html 我是从服务器调用中获取的，所以我不能硬编码

【参考方案1】：

您可以使用纯管道仅在管道的输入发生更改时重新运行它：

@Pipe(name: 'functionCaller')
export class FunctionCallerPipe 
    transform(func: any, ...args: any[]): any 
        return func(...args);
    

然后像这样使用它：

<p [innerHTML]="myfunction| functionCaller : name"></p>

import  Component  from '@angular/core';

@Component(
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
)
export class AppComponent  
  name = 'Angular';

  myfunction(name: string)
    alert(name);
    return '<div>' + name + '</div>';
  

【讨论】：

好的，谢谢 pokrishka，我会检查这个并回来