Изоляция внедрения зависимостей
Флаг
Например, компонент внедряет
В этом случае будет получено значение из родительского инжектора, даже если в текущем компоненте есть свой провайдер
👉 @sWebDev
Флаг
InjectFlags.SkipSelf
позволяет пропустить текущий инжектор и искать зависимость в родительских инжекторах. Это используется, когда в компоненте не должно быть локальных определений сервиса, а требуется внедрить его из вышестоящего уровня, например, из родителя или модуля.Например, компонент внедряет
ConfigService
, но пропускает локальный провайдер и получает зависимость извне:import { Component, Inject, inject, InjectionToken, InjectFlags } from '@angular/core';
export const CONFIG_TOKEN = new InjectionToken<string>('Config');
@Component({
selector: 'child-component',
template: `Config: {{ value }}`,
providers: [{ provide: CONFIG_TOKEN, useValue: 'локальная конфигурация' }]
})
export class ChildComponent {
value = inject(CONFIG_TOKEN, InjectFlags.SkipSelf);
}
В этом случае будет получено значение из родительского инжектора, даже если в текущем компоненте есть свой провайдер
CONFIG_TOKEN
. 👉 @sWebDev
👍3🔥1
Вот самое крутое:
Подпишись и находи для себя мощные нейросети бесплатно: https://www.tgoop.com/+VjFnutGM-r1lNmQy
Please open Telegram to view this post
VIEW IN TELEGRAM
👎3
List.js
List.js — JavaScript-библиотека для добавления поиска, сортировки и фильтрации к HTML-таблицам и спискам. Простая в подключении, не требует jQuery и подходит для интерфейсов с динамическими наборами данных.
👉 @sWebDev
List.js — JavaScript-библиотека для добавления поиска, сортировки и фильтрации к HTML-таблицам и спискам. Простая в подключении, не требует jQuery и подходит для интерфейсов с динамическими наборами данных.
👉 @sWebDev
👍4
Что бы я хотел знать об Angular в самом начале
Многие разработчики сталкиваются с трудностями в Angular не из-за сложности фреймворка, а из-за неправильного старта. Автор делится опытом: как разумно структурировать модули, использовать ленивую загрузку и строить код, который не развалится при росте проекта.
👉 @sWebDev
Многие разработчики сталкиваются с трудностями в Angular не из-за сложности фреймворка, а из-за неправильного старта. Автор делится опытом: как разумно структурировать модули, использовать ленивую загрузку и строить код, который не развалится при росте проекта.
👉 @sWebDev
👍3
Chrono.js
Chrono.js — JavaScript-библиотека для парсинга дат из текста на естественном языке. Распознаёт форматы вроде “завтра”, “5 июля”, “через 3 недели”, работает без зависимостей. Подходит для чат-ботов, форм бронирования и любых интерфейсов с вводом дат.
👉 @sWebDev
Chrono.js — JavaScript-библиотека для парсинга дат из текста на естественном языке. Распознаёт форматы вроде “завтра”, “5 июля”, “через 3 недели”, работает без зависимостей. Подходит для чат-ботов, форм бронирования и любых интерфейсов с вводом дат.
👉 @sWebDev
👍4
Современная альтернатива findDOMNode()
Что рекомендует использовать React вместо
Забыли? Вернитесь к посту от14.04.2025 .
👉 @sWebDev
Что рекомендует использовать React вместо
findDOMNode()
?Забыли? Вернитесь к посту от
👉 @sWebDev
👍3
Что рекомендует использовать React вместо findDOMNode()?
Anonymous Quiz
20%
React.Portal().
11%
React.cloneElement().
16%
React.Fragment().
54%
React.createRef().
👍5
Оптимистичные обновления интерфейса
Хук
Метод
👉 @sWebDev
Хук
useOptimistic()
в React позволяет обновлять состояние интерфейса до завершения серверного запроса, создавая ощущение мгновенного отклика. Первым аргументом передаётся массив или объект исходного состояния, вторым — функция, формирующая новое состояние из предыдущего и действия.'use client';
import { useOptimistic } from 'react';
function TodoList({ todos }) {
const [optimisticTodos, addOptimisticTodo] = useOptimistic(
todos,
(state, newTodo) => [...state, newTodo]
);
const handleAdd = async (text) => {
addOptimisticTodo({ text });
await fetch('/api/todo', { method: 'POST', body: JSON.stringify({ text }) });
};
return (
<ul>
{optimisticTodos.map((todo, i) => <li key={i}>{todo.text}</li>)}
</ul>
);
}
Метод
addOptimisticTodo
мгновенно обновляет список до ответа сервера. После получения реального ответа можно синхронизировать состояние или повторно перерендерить данные.👉 @sWebDev
👍4
Drift
Drift — JavaScript-библиотека для реализации эффекта увеличения изображения при наведении. Позволяет создавать плавный zoom-фокус без перезагрузки страницы и подходит для магазинов, галерей и витринных сайтов.
👉 @sWebDev
Drift — JavaScript-библиотека для реализации эффекта увеличения изображения при наведении. Позволяет создавать плавный zoom-фокус без перезагрузки страницы и подходит для магазинов, галерей и витринных сайтов.
👉 @sWebDev
👍3
Самый безопасный способ скрыть API-ключи в React
В React-приложениях API-ключи легко могут утечь, если оставить их на клиенте. В статье объясняется, почему нельзя полагаться на переменные окружения или обфускацию кода, и почему для защиты ключей нужно использовать серверную прослойку. Разбор показывает, как правильно выстраивать архитектуру запросов, чтобы ключи не попадали в браузер.
👉 @sWebDev
В React-приложениях API-ключи легко могут утечь, если оставить их на клиенте. В статье объясняется, почему нельзя полагаться на переменные окружения или обфускацию кода, и почему для защиты ключей нужно использовать серверную прослойку. Разбор показывает, как правильно выстраивать архитектуру запросов, чтобы ключи не попадали в браузер.
👉 @sWebDev
👍4🤔1