如何在 Angular 中缓存组件并基于自定义指令重用？-解网

问：

我有一个自定义指令，用于评估用户访问组件的权限，比如说 .ngIfPerm

set ngIfPerm(val) {
  // set val
  if (/*true condition*/) {
    this.viewContainer.createEmbbededView(this.templateRef)
  } else {
    this.viewContainer.clear()
  }
}

此指令放在一些在表的行上重复的按钮中，以决定是否应呈现和显示该按钮。例如，如果用户具有权限，则此按钮将显示在表的每一行上：EDIT

<button *ngIfPerm="EDIT" (click)="edit(rowData)>Edit</button>

问题是，Angular 重新渲染了这个按钮，而不是在表格的第二行重用它。如果将按钮放置在多个位置，这会导致应用程序的性能急剧下降。

我的问题是，有没有一种机制可以帮助在首次成功渲染后缓存此按钮，并在再次调用时重用它？（如缓存模板）

我已经读过，但它是针对 AngularJS 的，并且我正在将 Angular9 与 TypeScript 一起使用。templateCache

提前致谢。

Angular 模板缓存指令

import { Directive, Input, ViewContainerRef, TemplateRef } from '@angular/core';

@Directive({
  selector: '[cacheComponent]'
})
export class CacheComponentDirective {
  private hasView = false;

  constructor(
    private viewContainer: ViewContainerRef,
    private templateRef: TemplateRef<any>
  ) {}

  @Input() set cacheComponent(condition: boolean) {
    if (condition && !this.hasView) {
      this.viewContainer.createEmbeddedView(this.templateRef);
      this.hasView = true;
    } else if (!condition && this.hasView) {
      this.viewContainer.clear();
      this.hasView = false;
    }
  }
}

<table>
  <tr *ngFor="let rowData of data">
    <td>
      <button *cacheComponent="hasEditPermission(rowData)" (click)="edit(rowData)">Edit</button>
    </td>
  </tr>
</table>

如何在 Angular 中缓存组件并基于自定义指令重用？

How to cache component and reuse based on custom directive in Angular?

评论

评论