ng自保存下拉菜单

Angular的自保存下拉菜单——又是一个指令

使用Angular指令的强大功能来创建一个可重用的自保存下拉指令。

Angular指令是框架提供的一个功能强大的模式，可以用来给元素添加额外的行为。在本文中，我们将创建一个自定义Angular指令，为下拉元素启用自动保存功能。

什么是自动下拉保存菜单？

考虑一个示例应用程序中的这个简单场景，其中有一个下拉菜单来确定一个人的性别年龄组。这种情况的自然和有效的实现是使用带有选项的下拉菜单。 通常使用带有下拉字段和提交按钮的表单。但是，如果这个下拉框不是较大窗体的一部分呢?如果这是页面中没有保存按钮的单个选择项，该怎么办?在某些情况下，您可能不希望用户点击按钮来启动保存，因为这可能会引起摩擦。

我们可以使用一个自保存的下拉，它与后端数据库同步下拉变化事件的状态。您可以在使用数据获取器方法的react应用程序中发现这种模式，其中组件负责自己获取所需的数据。

太棒了!现在，我们如何告诉用户这个更改触发了保存,当出现错误时，我们如何让用户知道?很明显，我们需要一个优雅的解决方案来为用户提供正在进行的、成功的和失败的事件的可视化反馈。

让我们开始吧

在我们开始之前，先看看它工作的最终效果。

看起来很酷，不是吗?现在让我们概述一下方案：

1. 指令应该接受一个指向后端http调用的输入。
2. 当宿主元素触发’change '事件时，我们需要运行侦听器(listener)。
3. 需要在订阅之前显示一个加载器(loading)
4. 移除加载器，在成功调用时添加绿色标记图标
5. 一秒后移除绿色标记
6. 失败时，需要在选择字段旁边显示错误图标

让我们从使用Angular CLI创建Angular指令开始。

ng generate directive self-save

我们对这个指令只有一个输入：

@Input(‘observableFn’)

observableFn!: () => Observable;

ObservableFn将会有对http请求的引用，这个请求必须被用来保存这个特定的数据。我们将从使用这个指令的父级传递这个信息。

现在让我们引入ElementRef, Renderer2和Document

Copyconstructor(
	private elRef: ElementRef, 
	private renderer: Renderer2,
	@Inject(DOCUMENT) private document: Document
){
    }

我们将使用这些依赖:

ElementRef - 引用宿主元素

Renderer2 - 在出现错误时附加错误文本元素

Document - 参考文档

我们需要监听在宿主元素上的事件变化来知道下拉框值的变化

 onChange() {
   
  // Do all craziness
 }

现在开始去实现自动保存行为

if(this.observaleFn instanceof Function) {
   
  const element: HTMLElement = this.elRef.nativeElement;
  this.addLoader(element);
  const changeObservable: Observable<unknown> = this.observableFn();
  changeObservable.suscribe(
    -=> {
   
      this.handleSuccessCase(element);
    },
    -=> {
   
      this.handleErrorCase(element);
    }
  );
}

我们使用elementRef来获取本机宿主元素(select元素)，因为我们需要在操作时操作它。

接下来，我们通过调用输入函数来订阅已经作为输入传递的observable。这里有两个方法，我们将select元素传递给它们。现在让我们看看它们是如何实现的。

   
handleSuccessCase(element: HTMLElement) {
   
   this.removeBackground(element);
   this.addSuccess(element);
   setTimeout(() => {
   
     this.removeBackground(element);
   }, 1000);
}

 handleErrorCase(element) {
   
   this.</