Как работает JSON Pipe в Angular?
Просмотр исходного кода, чтобы понять, как это работает
Угловые каналы лучше всего подходят для преобразования / форматирования данных
Angular имеет несколько встроенных каналов, а также дает нам возможность создавать собственные каналы. Одна из встроенных труб - JsonPipe
. В этой статье я хотел бы провести вас через реализацию этого простого JsonPipe
.
Без дальнейшего ожидания перейдем к исходному коду:
Исходный код: https://github.com/angular/angular/blob/10.0.2/packages/common/src/pipes/json_pipe.ts#L10-L34
Все просто, правда? Это так же просто, как использовать JSON.stringify
, передав три параметра. Но знаете ли вы, для чего нужны эти второй и третий параметры?
Не волнуйся. Давайте разберемся, что они делают
Подробная информация о JSON.stringify:
Метод JSON.stringify()
преобразует объект или значение JavaScript в строку JSON, при необходимости заменяя значения, если указана функция-заменитель, или, возможно, включая только указанные свойства, если указан массив-заменитель.
Из документов MDN: Синтаксис
JSON.stringify(value[, replacer[, space]])
Давайте теперь рассмотрим все параметры на нескольких примерах.
Значение: объект или значение, которое необходимо преобразовать в строку JSON.
Заменитель: функция, которая изменяет поведение процесса строкового преобразования, или массив String
и Number
, которые служат в качестве разрешенного списка для выбора / фильтрации свойств объекта значения, который будет включены в строку JSON. Если это значение равно null
или не указано, все свойства объекта включаются в результирующую строку JSON.
Канал JSON в Angular не использует заменитель
Давайте рассмотрим несколько примеров для обоих вариантов использования:
Пробел: для этого мы можем передать строку или число.
Если мы передаем число, оно указывает количество пробелов для использования в качестве пробела, и это число ограничено 10 (если оно больше, то значение будет просто 10
). Значения меньше 1 указывают на то, что пространство использовать нельзя.
Если это String
, строка (или первые 10 символов строки, если она длиннее) используется как пробел. Если этот параметр не указан (или равен null
), пробелы не используются.
В канале JSON Angular используются 2 пробела.
Давайте посмотрим на несколько примеров
Совет. Если объект, который передается в метод JSON.stringify, имеет
toJSON
метод, то обычное преобразование в строку не выполняется, и вместо этого он просто вызывает этот метод.
Ресурсы:
MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
Угловой: https://github.com/angular/angular/blob/master/packages/common/src/pipes/json_pipe.ts
Вот и все. Надеюсь, вы найдете это полезным. Следите за более интересными статьями.