ng自保存下拉菜单

谁借莪１个温暖的怀抱￠ 2022-09-12 14:56 103阅读 0赞

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

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

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

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

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

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

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

## 让我们开始吧 ##

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

![img][]

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

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.removeBackground(element);
       const child = this.document.createElement('img');
       child.src = ERROR_ICON;
       const parent = this.renderer.parentNode(this.elRef.nativeElement);
       this.renderer.appendChild(parent, child);
       setTimeout(() => { 
         this.renderer.removeChild(parent, child);
       }, 1000);
     }

此代码遵循我们的的思路，即改变下拉值

*  将加载器添加到元素表明正在保存
 *  获取http的observable和subscribes

成功：

*  移除加载器背景
 *  添加成功icon
 *  在一秒后移除成功icon

失败:

*  创建一个虚拟div元素来保存错误文本
 *  将innerText填充为从服务器接收到的错误消息
 *  使用Renderer将此子元素附加到父节点，以便错误消息不会显示在下拉框下方

现在让我们实现上面使用的这些方法， 将加载器添加到下拉列表中

addLoader(element: HTMLElement){ 
      this.addBackground(
        element,
        LOADER_ICON,
        20
      );
    }

同样的方法也可以添加成功指示符:

addSuccess(element: HTMLElement){ 
      this.addBackground(
      element,
      SUCCESS_ICON,
      20)；
    }

现在去实现addBackground（）方法

addBackground(
       element: HTMLElement,
       backgroundImg: string,
       backgroundSize: number
     ) { 
       element.style.background = `#fff url("${ backgroundImg}") no-repeat right 20px center`;
       element.style.backgroundSize = `${ backgroundSize}px`;
     }

我们可以将背景元素设置为none来移除背景：

removeSuccess(element: HTMLElement){ 
      this.removeBackground(element);
    }
    removeBackground(element: HTMLElement){ 
      element.style.background = 'none';
    }

现在把指令添加到标签上

让我们创建post()方法:

// Done for demo purposes only. Use a service to talk to APIs
     post(): Function { 
       return () => { 
         return this.http.post(“https://jsonplaceholder.typicode.com/posts”, { });
       };
     }

## 总结 ##

当我们需要对应用程序中的多个元素应用重复模式时，指令非常方便。它们可以用来在应用程序中创建可重用的模式，并通过保持应用程序的整洁使开发人员的工作更轻松

# 完整代码 #

Self-save.directive.ts

import {  DOCUMENT } from '@angular/common';
    import { 
      Directive,
      ElementRef,
      HostListener,
      Inject,
      Input,
      Renderer2
    } from '@angular/core';
    import {  Observable } from 'rxjs';
    
    const SUCCESS_ICON =
      'https://i.pinimg.com/originals/7b/dd/1b/7bdd1bc7db7fd48025d4e39a0e2f0fd8.jpg';
    const ERROR_ICON =
      'https://www.seekpng.com/png/detail/334-3345964_error-icon-download-attention-symbol.png';
    
    const LOADING_ICON = 'https://replit.com/public/images/loading_dots.gif';
    /** * `persistOnChange` directive takes an Input - @param observableFn which @returns an Observable ideally returned by an http request. * and shows loader when the request is in-flight and shows a tick mark on API success. * In API failure cases, shows the error message below the host. * Ideally to be used with the Select element(not limitted to) */
    @Directive({ 
      selector: '[selfSave]'
    })
    export class SelfSaveDirective { 
      @Input('observableFn')
      observableFn!: () => Observable<any>;
      constructor(
        private elRef: ElementRef,
        private renderer: Renderer2,
        @Inject(DOCUMENT) private document: Document
      ) { }
      @HostListener('change')
      onChange() { 
        if (this.observableFn instanceof Function) { 
          const element: HTMLElement = this.elRef.nativeElement;
    
          this.addLoader(element);
          const changeObservable: Observable<unknown> = this.observableFn();
          changeObservable.subscribe(
            _ => { 
              this.handleSuccessCase(element);
            },
            _ => { 
              this.handleErrorCase(element);
            }
          );
        }
      }
    
      handleSuccessCase(element: HTMLElement) { 
        this.removeBackground(element);
        this.addSuccess(element);
        setTimeout(() => { 
          this.removeBackground(element);
        }, 1000);
      }
    
      handleErrorCase(element) { 
        this.removeBackground(element);
        const child = this.document.createElement('img');
        child.style.width = '20px';
        child.src = ERROR_ICON;
        const parent = this.renderer.parentNode(this.elRef.nativeElement);
        this.renderer.appendChild(parent, child);
        setTimeout(() => { 
          this.renderer.removeChild(parent, child);
        }, 1000);
      }
    
      addLoader(element: HTMLElement) { 
        this.addBackground(element, LOADING_ICON, 20);
      }
      addSuccess(element: HTMLElement) { 
        this.addBackground(element, SUCCESS_ICON, 20);
      }
    
      addBackground(
        element: HTMLElement,
        backgroundImg: string,
        backgroundSize: number
      ) { 
        element.style.background = `#fff url("${ backgroundImg}") no-repeat right 20px center`;
        element.style.backgroundSize = `${ backgroundSize}px`;
      }
    
      removeBackground(element: HTMLElement) { 
        element.style.background = 'none';
      }
    }

App.ts

import {  Component } from '@angular/core';
    import {  HttpClient } from '@angular/common/http';
    
    @Component({ 
      selector: 'app-root',
      templateUrl: './app.component.html',
      styles: [
        ` select { width: 200px; padding: 10px; } `,
      ],
    })
    export class AppComponent { 
      constructor(private http: HttpClient) { }
      // Done for demo purpose only. Use a service to talk to APIs
      post(): Function { 
        return () => { 
          return this.http.post('https://jsonplaceholder.typicode.com/posts', { });
        };
      }
    }

App.html

[img]: /images/20220828/2d30b3e1705c4952bc42ac245e07637e.png