Angular组件之间扩展了类似的功能

Question

我已经为我的组织创建了一个UI Angular库，用于该组织的其他微服务web应用。基本上，库包含一些独立的组件，如卡片，复选框，数据表，日期选择器，输入字段(输入，文本区)，选择，上传模式，徽章，工具提示等与本组织的UI/UX。

这些组件在其他web应用中使用，以提供组件和功能的独特视图。现在，我想在一些组件中实现自动保存功能。该特性应该将输入值保存在缓存中，并将保存的值加载回输入。保存值后，将删除缓存。这个功能是必需的，因为有时用户正在填写表单，错误地点击了其他地方，页面被重新加载……当他/她回来时，他/她必须重新填写表格。

解决方案在我的脑海里

• 我可以通过使用自定义指令来做到这一点，然后所有其他终端开发者都必须更新他们的应用并将该指令添加到每个组件中。

• 我在想，如果我能创建带有自动保存功能的自定义类(抽象类)，并在类型输入的组件中扩展这个类，但我觉得这在Angular中可能不是正确的方法。其中一个问题是DI，因为你必须从父组件获得依赖项(服务…)并将其传递给子组件。

  @Component(...)
  export class InputText implements OnInit, OnDestroy extends AutosaveInputData {
  constructor(....) {
  super(....);
  }
  ngOninit() {...};
  @Overwrite()
  protected aFunctionFromExtendClass() {
  .....
  }
  ngOnDestroy() {...};
  }
  

• 另一个选项可以是创建类似于ControlValueAccessor的东西，但我不知道如何做到这一点，从哪里开始?这对我来说似乎是一个好方法

如何为某些组件添加类似的功能?正确的做法是什么?以及如何?

我现在用的是angular 9，几个月后我们将转向angular 13。

Thanks in advance

Answer 1

directive听起来是个好方法

<input 
[input-cache]="uniqueId"
[clear]="isSaved"
>

在InputCacheDirective中，您可以使用"uniqueId"保存sessionStorage中的输入值。isSaved将是一个布尔setter(或者可以使用ngOnChanges)来清除sessionStorage