从 Angular 中的更改检测中删除 attribute/element

Question

假设我的模板中有这个：

<img src="..." alt="myService.getImgAlt()" />

这行得通...但是在每次更改检测时都会调用此函数，这对性能不利。第一次调用 getImgAlt() 后是否可以从变化检测中删除此属性（或整个元素）？

我想直接从模板调用 myService，这意味着需要调用函数，我不能只使用组件中的变量。该组件仅定义服务，因此模板可以访问它：

export class MyComponent {

    constructor(public myService: MyService) {}

Answer 1

您可以使用（纯）管道，因为您可以从那里调用服务，并且管道只执行一次：

@Pipe({ name: 'myPipe' })
export class MyPipe implements PipeTransform {

    constructor(private someService: SomeService) {}

    transform(someExampleId: string): string {

        return this.someService.getSomething(someExampleId);

    }

}

要在模板中使用管道：

<img src="..." alt="{{ '1234' | myPipe }}" />

因为管道（1234）的输入没有变化，管道只执行一次，对性能有好处。

从 Angular 中的更改检测中删除 attribute/element

Remove attribute/element from change detection in Angular

angular-template

angular

angular-changedetection