角部分扩展了它们之间的相似功能

发布于 2025-01-31 00:48:55 字数 993 浏览 1 评论 0原文

我为组织创建了一个UI Angular库，该库用于该组织的其他微服务Web应用程序。基本上，库包含一些独立的组件，例如卡，复选框，数据表，日期选择器，输入字段（输入，textAarea），选择，上传模式，徽章，工具提示等，使用本组织的UI/UX。

这些组件用于其他Web应用程序，以提供组件和功能的独特视图。现在，我想在某些组件中实现AutoSave功能。该功能应将输入值保存在缓存中，并应将保存值加载回输入。保存值后，将删除缓存。需要该功能，因为有时用户填写表格，并且错误地单击了其他地方，并且页面被重新加载...当他/她回来时，他/她必须再次填写表格。

在我看来，解决方案

我可以使用自定义指令来执行此操作，然后所有其他End-Devs都必须更新其应用程序并将此指令添加到每个组件中。

我在想，如果我可以使用AutoSave功能创建自定义类（抽象类）并将此类扩展到类型输入的组件中，但是在某个地方，我觉得这可能不是Angular中正确的方法。他的问题之一是DI，因为从父母那里，您必须获得依赖关系（服务...）并传递给孩子。

  @component（...）
  导出类inputText onininit oninit，ondestroy扩展了autosaveinputdata {
      构造函数（....）{
        极好的（....）;
      }
      ngoninit（）{...};
      @OverWrite（）
      受保护的afunctionfromextendClass（）{
       ..... .....
      }
      ngondestroy（）{...};
  }

另一个选项可能是创建与ControlValueAccessor类似的东西，但是我不知道该如何从哪里开始？这似乎是我的好方法

如何在某些组件中添加类似的功能？正确的方法是什么？以及如何？

我正在使用Angular 9，几个月后，我们将转移到Angular 13

。

原文

I have created a UI Angular library for my Organization, which is used in other microservice web apps of this org. Basically, Library contains some independent components such as cards, checkbox, data table, date picker, input fields (inputs, textarea), select, upload modal, badge, tooltip etc with the UI/UX of this Organisation.

These components are used in other web-apps to provide a unique view of components and functionality. Now, I wanted to implement autosave feature in some components. The feature should save the input values in the cache and should load the saved value back to the inputs. Once the values are saved, the cache is removed. The feature is required because sometimes the user is filling the form and by mistake he has clicked somewhere else and the page is reloaded... when he/she comes back, he/she has to fill the form again.

Solutions in my mind yet

I can do this by using a custom directive, and then all other end-devs has to update their apps and add this directive to each component.
I was thinking, if I can create custom class (abstract class) with autosave functionality and extend this class in the components of type inputs, but somewhere I feel this might not be correct approach in Angular. One of he problem is the DI because from parent you have to get the dependencies(services...) and pass to the child compoent.
```
  @Component(...)
  export class InputText implements OnInit, OnDestroy extends AutosaveInputData {
      constructor(....) {
        super(....);
      }
      ngOninit() {...};
      @Overwrite()
      protected aFunctionFromExtendClass() {
       .....
      }
      ngOnDestroy() {...};
  }
```
The other option could be to create something similar to ControlValueAccessor, but I have no idea how can do it and start from where? This seems to be a good approach to me

How can I add a similar functionality to some components?
What would be the correct approach to follow? and How?

I am using angular 9 and in a few months we will be shifting to the angular 13.

Thanks in advance

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

掀纱窥君容 2025-02-07 00:48:55

指令

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

在InputCachediractive中听起来像是一种很好的方法setter（或可以使用ngonchanges）清除sessionstorage

The directive sounds like a good approach

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

In the InputCacheDirective you could save the input value in sessionStorage using the "uniqueId" - isSaved would be a boolean setter (or could use ngOnChanges) to clear the sessionStorage

回复收藏 0 原文

~没有更多了~