Автор оригинала: 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
Шаг 3
Вот и все!
Я буду толкать проект в Git Reppo здесь , скоро.