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

Question

我有这样的模板视图。

<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 调用以通过内部 html 呈现 html 内容的简单方法，这里 myfunction() 被多次调用，我收到多个警报, 谁能帮我解决这个问题。

这个 stackblitz 是 link

提前致谢

Answer 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>';
  }
}

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

Why Angular 2+ innerHTML is calling method multiple times in a single statement, How to solve this

javascript

innerhtml

angular

angular6