Руководство по реализации пользовательских пайпов в Angular.
В Части 1 этой серии мы рассмотрели основные концепции труб и обсудили несколько встроенных труб. В этой части мы сделаем еще один шаг и посмотрим, как можно реализовать пользовательские каналы.
Мы узнаем о пользовательских каналах, создав один для варианта использования.
Сценарий использования. Предположим, нам нужно отобразить обрезанные данные строки на основе начального и конечного индексов. Как это можно реализовать с помощью конвейеров?
Шаг 1.Создайте канал с помощью angular-cli.
ng g p stringSubstr
Эта команда создаст канал по умолчанию в нашем приложении Angular. Давайте посмотрим на структуру кода по умолчанию:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'stringSubstr' // Line 1
})
export class StringSubstrPipe implements PipeTransform { // Line 2
transform(value: unknown, ...args: unknown[]): unknown { // Line 3
return null; // Line 4
}
}
Давайте немного проанализируем фрагмент:
- Декоратор канала, т. е. @Pipe, имеет свойство с именем "name", которое ссылается на имя канала, которое затем используется в файле HTML. (Линия 1)
- «PipeTransform» — это интерфейс, который должен быть реализован с помощью Custom Pipe. (строка 2)
- В строке 3 мы реализуем метод transform интерфейса PipeTransform.
Этот метод преобразования содержит 2 аргумента, первый из которых — это значение, которое необходимо преобразовать. преобразовано, то есть значение, к которому применяется канал в HTML, а второе — это оставшийся параметр, содержащий все аргументы, переданные в каналы. (Если вы не знаете, как работает оставшийся параметр, ознакомьтесь с этой статьей.) - Наконец, не забудьте вернуть значение после преобразования (строка 4), иначе вы не получите желаемого результата.
Итак, это 4 шага, которые необходимо выполнить, чтобы создать собственный канал. Теперь давайте воспользуемся ими в нашем вышеупомянутом варианте использования.
Мы рассмотрим 2 сценария:
- Один аргумент — обрезать данные из заданного индекса до конца строки.
Наша труба уже готова. Теперь давайте начнем работать над тем же.
Ниже мы добавили вертикальную черту над строкой, которую необходимо обрезать и передать в одном из аргументов как 3.
<div>
{{pipeExample | stringSubstr : 3}} // pipeExample is defined in ts with value = 'Javascript is too good';
</div>
Давайте проанализируем, какое значение присутствует в нашем методе преобразования после применения некоторого логгера.
export class StringSubstrPipe implements PipeTransform {
transform(value: string, ...args: number[]): unknown {
console.log('Value is ', value);
console.log('Arguments is ', args);
console.log('First Argument is ', args[0]);
return value;
}
}
Итак, вывод для вышеуказанного регистратора:
Как видите, значение — это значение, которое мы хотим преобразовать (поверх которого добавляется настраиваемый канал), а args — это полный список аргументов, которые мы передаем в канал.
Доступ к аргументам можно получить с помощью индекса в порядке, указанном в которые они передаются в HTML.
Как только вы поймете вышеизложенную часть, остальное будет довольно простым и будет простым JavaScript.
Теперь давайте посмотрим на полную реализацию:
export class StringSubstrPipe implements PipeTransform {
transform(value: string, ...args: number[]): string {
let initialIndex = args[0];
let subStr = value.substring(initialIndex);
return subStr;
}
}
В начальном индексе мы извлекли первый переданный аргумент и уже на следующем шаге использовали метод подстроки JavaScript для нарезки данных.
Наконец, верните данные после вычисления, и они будут видны в HTML.
Это первый сценарий, а теперь переключитесь на второй сценарий.
2. Несколько аргументов —обрезать данные от заданного начального индекса до заданного конечного индекса.
Измените HTML, чтобы передать 2 параметра.
<div>
{{pipeExample | stringSubstr : 3 : 9}}
</div>
Итак, здесь мы передали первый параметр как 3, а второй параметр как 9.
Теперь мы получим то же самое в нашем пользовательском канале:
export class StringSubstrPipe implements PipeTransform {
transform(value: string, ...args: number[]): string {
let initialIndex = args[0];
let secondIndex = args[1];
let subStr = value.substring(initialIndex, secondIndex);
return subStr;
}
}
Как и в первом подходе, мы извлекли аргументы в отдельные переменные и использовали метод подстроки JavaScript для преобразования и, наконец, вернули значение.
Выход, как и ожидалось, таков:
Итак, вкратце это то, как вы реализуете пользовательский канал. Надеюсь, вы смогли получить некоторое базовое понимание здесь. Дайте мне знать, если у вас есть дополнительные вопросы или вам нужны дополнительные разъяснения.
Обо мне — я энтузиаст программирования, который любит читать и писать о внешнем дизайне, JavaScript и вещах, связанных с UI/UX. Нажмите здесь, чтобы прочитать все мои статьи и дайте мне знать ваши отзывы.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn и Discord.
