Задать вопрос
  • Как избавится от повторений?

    Xuxicheta
    @Xuxicheta Куратор тега Angular
    инженер
    В компоненты вынеси
    Ответ написан
    4 комментария
  • Как организовать систему переключения публичных запросов на приватные?

    Xuxicheta
    @Xuxicheta Куратор тега Angular
    инженер
    менять все public запросы на private

    Это каким образом?
    Что вообще за разделение странное? Обычно есть пул запросов, фронтенд в каждом запросе шлет токен авторизации, бэкенд в каждом запросе проверяет права доступа.
    Ответ написан
  • Как правильно работать с валидацией формы?

    Xuxicheta
    @Xuxicheta Куратор тега Angular
    инженер
    Сделать компонент-обертку или директиву, которая будет получать NgControl, слушать его, получать ошибки и рендерить.
    Ну например так https://stackblitz.com/edit/angular-ivy-yiy8tv?fil...
    Вместо ngIf можно прикрутить динамический рендеринг.

    Вот статья есть https://netbasal.com/make-your-angular-forms-error...
    Ответ написан
  • Как правильно установить scroll event angular?

    Xuxicheta
    @Xuxicheta Куратор тега Angular
    инженер
    export class TestComponent {
      constructor(private zone: NgZone) {}
    
      ngOnInit() {
        this.zone.runOutsideAngular(() => {
          // don't forget to unsubscribe
          fromEvent(window, 'scroll').subscribe(...);
        });
    }


    ну вместо window возьмите свой элемент.
    через (scroll) или HostListener не надо делать, большой поток патченных событий забьет процессор

    статья вот
    Ответ написан
  • Почему Angular CLI обновляется до 12 версии?

    Xuxicheta
    @Xuxicheta Куратор тега Angular
    инженер
    Мне это использовать или все-таки нужно установить Angular 14?

    Ну какой надо, такой и используйте.
    npm i -g @angular/cli@latest
    установит глобально последнуюю версию. Ну или ту которую укажете после собаки.

    Во первых решила обновить все до последних версий

    "Обновить" можно существующий проект. А новый можно начать с любой версии, нужно только соответствующий cli взять.

    При этом выдается:"Warning: The current version of Node (16.13.0) is not supported by Angular." (при этом возможно создать проект и он запускается).

    Лучше взять рекомендуемую версию ноды. Могут быть проблемы с библиотеками, особенно с теми, которые используют бинарники.
    Быстро менять версию ноды можно с помощью nvm
    Ответ написан
    Комментировать
  • Правильная ли структура каталогов в Angulra проекте?

    Xuxicheta
    @Xuxicheta Куратор тега Angular
    инженер
    Но перед этим внутри каталога каждого модуля я создам каталог components, куда и буду складывать компоненты

    Складывай прям так, зачем лишняя папка components
    Папка должна говорить о смысле, типа
    layout
      header
        header-buttons
        header-menu
      footer
        footer-annotation


    И тому подобное.
    Ответ написан
    Комментировать
  • Как в angular сделать очередь запросов?

    Xuxicheta
    @Xuxicheta Куратор тега Angular
    инженер
    Сначала делаем результирующий сабжект, куда будем помещать наши запросы по клику.
    Это будет high order observable, т.е. поток, выкидывающий другие потоки.
    const trigger = new Subject<Observable<string>>();
    Допустим вот наша эмуляция запроса. Пусть у каждого будет номер mark1, mark2 и тд. Сделаю фабрику c внутренним счетчиком mark. У вас тут будет реальный запрос вместо этого.
    const getRequest = (() => {
      let mark = 1;
      return () => of(`m${mark++}`).pipe(
          tap(x => console.log('start', x)), // пометим начало запроса, т.е. момент подписки на него
          delay((1000 * Math.random()) + 300), // случайная задержка
          tap(x => console.log('end', x)), // пометим окончание запроса, когда приходит результат.
        );
    })();

    При клике плюемся запросом. Ну как то так, если не тащить ангуляр.
    button.onclick = () =>  trigger.next(getRequest());


    А теперь немного магии. Результирующий поток будет выплевывать результаты последовательно. Каждый следующий запрос начнет выполняться после завершения предыдущего.
    const result = trigger.pipe(concatAll())

    concatAll, получая на вход поток с потоками, складывает их себе в папочку и подписывается на них по очереди, по мере завершения предыдущего.
    Ответ написан
    1 комментарий
  • Не работает post form angular?

    Xuxicheta
    @Xuxicheta Куратор тега Angular
    инженер
    Причем тут вообще Angular? action это аттрибут хтмл-тэга form.
    action+method видит браузер и отправляет содержимое формы по указанному адресу. У вас был указан только method, поэтому браузер ничего никуда не слал, т.к. не знал адреса.

    ng-pristine ng-valid это классы накладываемые Ангуляром при проверке формы. Т.к. форма у вас никак ангуляром не обрабатывается, проверки пустые и всегда пройденны, форма типа валидна. Эти классы ни на что не влияют и ничего тут не значат.
    Ответ написан
    Комментировать
  • Как правильно организовать архитектуру сервисов в Angular?

    Xuxicheta
    @Xuxicheta Куратор тега Angular
    инженер
    https://refactoring.guru/ru/design-patterns/mediator

    Если гет и пост относятся к одной сущности, то можно засунуть их в тот же entity.service.ts. Если в нем стало слишком много таких методов, то можно вынести в entity-mediator.service.ts. Ну или как то похоже.
    Если к разным доменам, то создается отдельный сервис, относящийся уже к области в которой он вызывается. Т.е. к потребителю. И там уже обращаешься к ентити-сервисам.
    Ответ написан
    Комментировать
  • Выбор архитектуры: web или desktop?

    Xuxicheta
    @Xuxicheta
    инженер
    web-сервер от "не веб" отличается только умением работать через протокол Http
    Фактически это и есть обычный сервер, только протокол связи стандартизован, так чтобы с ним умел общаться браузер. Но точно так же с ним может общаться любой другой клиент.

    То есть выбор стоит так "использовать мне стандартный протокол или нестандартный". И тут сами выбираете.

    Сервер передаёт пользователю видео с видеокамер на которых отображается деталь. Пользователь щёлкая по изображению детали запускает процесс её обработки оборудованием. То есть, будет потоковое видео, тяжёлых вычислений не будет.

    Тут в веб тоже есть стандарт - WebRTC, но не слишком удобный, смотрите уже с чем клиент умеет работать.
    Ответ написан
    2 комментария
  • Почему не уничтожается сервис при уничтожении родительского сервиса?

    Xuxicheta
    @Xuxicheta Куратор тега Angular
    инженер
    нет такого понятия - родительский сервис.
    Сервисы уничтожаются при уничтожении их инжектора. В случае провайдинга в компонент или директиву, это будет инжектор ноды и он уничтожится когда компонент или директива будет демонтирован. В случае провайдинга в рут или модуль - никогда.
    Ответ написан
    Комментировать
  • Как создать два отдельных инстанса для сервиса в компоненте?

    Xuxicheta
    @Xuxicheta Куратор тега Angular
    инженер
    А почему бы не сделать так, зачем эти токены строкой?
    class ScreenMediaDevicesService extends MediaDevicesService {}
    class CameraMediaDevicesService extends MediaDevicesService {}
    
    providers: [ScreenMediaDevicesService, CameraMediaDevicesService ]
    Ответ написан
  • Как сделать айди Observable?

    Xuxicheta
    @Xuxicheta Куратор тега Angular
    инженер
    export class CharacterDetailsComponent implements OnInit {
      readonly id$ = this.route.paramMap.pipe(map(paramMap => paramMap.get('id'));
      ....


    Все
    Ответ написан
  • Как в angular с помощью cli создать модуль который автоматически попадёт в imports в app.module?

    Xuxicheta
    @Xuxicheta Куратор тега Angular
    инженер
    ниче не понял, но вроде опция --module позволяет указать куда импортируется созданное.
    Но по моему это бесполезно, и вообще в AppModule должен быть минимум импортов, только необходимое. Из ui-либ вообще не должно быть ничего.
    Ответ написан
    Комментировать
  • Как на Angular 14 получить DOM элемент?

    Xuxicheta
    @Xuxicheta Куратор тега Angular
    инженер
    на этапе ngOnInit элемент еще не существует и ViewChild не присвоен.
    Можно обратиться к нему позже, после ViewInit или можно добавить настроечку @ViewChild('video', { static: true})тогда он будет доступен в ините
    Ответ написан
  • Как вызвать метод одного компонента из другого в Angular?

    Xuxicheta
    @Xuxicheta Куратор тега Angular
    инженер
    Получать инстансы компонентов можно
    1. Нижележащего через декораторы ViewChild, ContentChild и т.п.
    2. Вышележащий через инжект в конструкторе. Провайдить его никуда не надо, он будет сам получен из дерева вью-инжекторов.

    Но ваш вопрос ващет решается хранением данных в сервисе, а не в компоненте. В сервисе лежит модель данных, компоненты только рисуют.
    Ответ написан
    Комментировать
  • Как избавиться от дублирования подобных функций?

    Xuxicheta
    @Xuxicheta Куратор тега Angular
    инженер
    function filterList() {
      return filter(list=> list!= null && list.length > 0)
    }


    можно использовать в пайпе.
    Остальное - подписка и тейкантил - не нужно
    Ответ написан
    Комментировать
  • Как правильно работать с массивами в RxJs?

    Xuxicheta
    @Xuxicheta Куратор тега Angular
    инженер
    getParameters(ids: (string|number)[]): Observable<MyResult[]> {
      return forkJoin(ids => ids.map(id => this.packageService.getPackage(id)))
    }


    Типичный параллельный запрос с получением пачки результатов.
    Подписка со складыванием результатов в массив не нужна, промисы вообще не нужно никуда тащить, сразу шли в игнор странных чуваков с промисами и прорвой бессмысленного кода :)
    Внутри this.packageService.getPackage возможно придется сделать обработку ошибки, т.к. если в forkJoin попадет ошибка, то сломается вся пачка, ну так же как и в случае Promise.all.
    Ответ написан
    3 комментария
  • Как передать шаблон с event binding в directive?

    Xuxicheta
    @Xuxicheta Куратор тега Angular
    инженер
    В принципе можно скостылить какого-нибудь уродца, но смысла большого не вижу.
    Предпочтительней два пути.
    1. Отказаться от tippy в пользу основанной на ангуляре либы.
    2. Взять готовую обертку, вот angular-tippy нагуглилось. Может еще что есть, надо смотреть.
    Ответ написан
    Комментировать
  • Как использовать SwitchMap RxJs для не "Observable" функций и отменить предыдущий запрос?

    Xuxicheta
    @Xuxicheta Куратор тега Angular
    инженер
    switchMap не отменяет никаких запросов. Он отписывается от потока.
    А уже HttpClient так устроен, что отменяет запрос при отписке. Т.е. вызывает XMLHttpRequest.abort() когда срабатывает TearDown logic.

    Если вы используете fetch, а не xhr, то его тоже можно завернуть в обсервабл. Что-то типа такого

    function request(url) {
      return new Observable(observer => {
        const controller = new AbortController()
        const signal = controller.signal
        signal.addEventListener("abort", () => observer.complete());
    
        fetch(url, { signal  })
                .then(res => {
                    observer.next(res);
                    observer.complete();
                  })
               .catch((err) => {
                    observer.error(err);
                    observer.complete();
                });
    
          return () => controller.abort();
      });
    }

    Писал по памяти, возможно это даже работает :)
    При создании Observable переданный ему коллбэк возвращает логику, которая будет выполнена при отписке от него, т.е. teardown
    Ответ написан
    1 комментарий