Рубрики
Без рубрики

Создание встроенного редактирования компонента для форм-входов в угловых 2

Улучшите конструкцию UX, создавая компонент редактирования встроенного редактирования для форм-входов с использованием угловых 2.

Автор оригинала: Godson Ukpere.

Потребность

В двух словах Пользовательский опыт , но одно слово на немецком Benutzererfahrung 😏.

Большинство веб-страниц с Создать , Вид и Редактировать Страницы, кажется, сталкиваются с избыточностью, которые выделяют изолированные Вид и Редактировать страницы. Это супер удивительно иметь только Создать и а Вид Страница, с Редактировать Система, инкапсулированная в Вид страница. Прежде чем начать, я хотел бы поблагодарить бизнес-аналитик моей команды, Хорхе Парао, за то, что дал мне идею.

Прежде чем начать

Вы должны быть знакомы с компонентной архитектурой угловой 2-х годов, и это двусторонняя связывание данных. Если вы знакомы с этими системами, то мы добры к работе. Точно так же, вот некоторые полезные угловые 2 основных момента, которые стоят знать.

Создание компонента Inline-редактирования

Я использую angular-cli Лесайте мои угловые 2 приложения – вы тоже должны. Итак, мы создаем новый компонент и называем это Встроенный редактирование Нравится так: NG генерирует компонент Inline-Edit (Сокращение NG G Компонент встроенный - редактировать ).

Я также рекомендую вам иметь папку для своих пользовательских компонентов, поэтому вы не смешиваете страницы, маршруты и услуги, все в одном каталоге, поэтому я бы сделал Компоненты компонентов Ng G/Custom/Inline-Edit при условии, что каталог Компоненты/пользовательские/ уже существует.

Исходный код

Таким образом, в нашем пустом компоненте нам нужно создать кучу переменных, которые помогут привязать данные из родительского компонента в наш компонент, обрабатывать события для сокрытия или отображения Форма - Интерфейс элемент и так далее.

Итак, во-первых, мы используем Вход Декоратор от @ Угловая/ядра Отказ Он используется для получения данных из родительских компонентов.

ViewShild Декоратор используется для ссылки на собственный элемент DOM в скрипте компонента.

Так что в нашем Встроенный вход Компонент, мы объявляем все переменные, которые нам нужны:

Inline-edit.component.ts.

  @ViewChild('inlineEditControl') inlineEditControl; // input DOM element
  @Input() label: string = '';  // Label value for input element
  @Input() type: string = 'text'; // The type of input element
  @Input() required: boolean = false; // Is input requried?
  @Input() disabled: boolean = false; // Is input disabled?
  private _value: string = ''; // Private variable for input value
  private preValue: string = ''; // The value before clicking to edit
  private editing: boolean = false; // Is Component in edit mode?
  public onChange: any = Function.prototype; // Trascend the onChange event
  public onTouched: any = Function.prototype; // Trascend the onTouch event

  // Control Value Accessors for ngModel
  get value(): any {
    return this._value;
  }

  set value(v: any) {
    if (v !== this._value) {
      this._value = v;
      this.onChange(v);
    }
  }

  // Required for ControlValueAccessor interface
  writeValue(value: any) {
    this._value = value;
  }

  // Required forControlValueAccessor interface
  public registerOnChange(fn: (_: any) => {}): void {
    this.onChange = fn;
  }

  // Required forControlValueAccessor interface
  public registerOnTouched(fn: () => {}): void {
    this.onTouched = fn;
  }

NB – с целью этого учебника я буду использовать встроенные комментарии, IRL, это плохая практика.

Далее мы должны создавать функции, которые помогают обрабатывать фокус и редактирование входного элемента; I.E. Когда нажат какой-то текст, входной элемент должен появиться и исчезнуть сразу после того, как он ослабляет фокус, показывая нам вновь введенное значение в стильном формате.

Inline-edit.component.ts.

  // Do stuff when the input element loses focus
  onBlur($event: Event) {
    this.editing = false;
  }

  // Start the editting process for the input element
  edit(value) {
    if (this.disabled) {
      return;
    }

    this.preValue = value;
    this.editing = true;
    // Focus on the input element just as the editing begins
    setTimeout(_ => this._renderer.invokeElementMethod(this.inlineEditControl,
      'focus', []));
  }

Кроме того, обратите внимание, что переопределенные методы должны поступать из ControlValueAccessor Интерфейс в @ угловые/формы Отказ Это помогает управлять Getter и Setter для значения и Написание изображения функция тоже. Поэтому нам нужно импортировать ControlValueAccessor Класс и создайте провайдер, который будет помещен в инициализатор нашего компонента. См. Ниже всего необходимого импорта для установки этого.

Inline-edit.component.ts.

import { Component,
  Input,
  ElementRef,
  ViewChild,
  Renderer,
  forwardRef,
  OnInit } from '@angular/core';
  import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';

Теперь мы создаем и вставляем провайдер для наших Встроенный редактирование составная часть.

Inline-edit.component.ts.

const INLINE_EDIT_CONTROL_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => InlineEditComponent),
    multi: true
  };

@Component({
  selector: 'app-inline-edit',
  templateUrl: './inline-edit.component.html',
  providers: [INLINE_EDIT_CONTROL_VALUE_ACCESSOR],
  styleUrls: ['./inline-edit.component.css']
})

export class InlineEditComponent implements ControlValueAccessor, OnInit {
……
}

Легкая часть

Теперь, когда мы закончили с контроллером компонента, время для просмотра.

Вид довольно прост, все, что нам нужно сделать, это преодолеть некоторые свойства от нашего контроллера и родительского компонента (отключенного, требуемого, значения, метки, типа и т. Д.). и скрыть или показать вход и значения, основанные на логическом значении Редактирование Отказ

Inline-edit.component.html.

{{value}} 

Применение

Теперь мы можем использовать наш пользовательский компонент. Чтобы ссылаться на компонент в угловой 2, все, что вам нужно сделать, это использовать тег селектора и пройти в Вход () Параметры как атрибуты. См. ниже:

app.component.ts.

{{title}}

Шаг 1

угловой 2.

Шаг 2

угловой 2.

Шаг 3

угловой 2.

Вот и все!

Я буду толкать проект в Git Reppo здесь , скоро.

Ваше здоровье.