Size: a a a

Angular - русскоговорящее сообщество

2021 March 18

M

Maksim in Angular - русскоговорящее сообщество
Mikhail Kamakhin
Ребята, смотрите, я написал такое:

  getBanner$ = this.cmsService.getDesktopBanner().pipe(
   takeUntil(this.unsubscribe$),
   map(res => _.cloneDeep(res)),
   map(res => res.map(el => {
     el.image = this.domSanitizer.bypassSecurityTrustUrl(el.image);
     return el;
   }))
 );

 ngOnInit(): void {

   this.getBanner$.subscribe((res) => {
     this.imageList = res.slice();
     console.log(this.imageList);
     if (this.imageList.length > 1) {
       this.intervalSlider(); // тут я типа запускаю слайдер
     }
   });
 }
А мне говорят:
С таким подходом переменна imageList не имеет смысла, так можно напрямую использовать getBanner$. То есть вместо подписи использовать оператор tap (чтобы запустить интервал). либо же в map. Ну и тогда
getBanner$ превратится в banners$

  getBanners$ = this.cmsService.getDesktopBanner().pipe(
   takeUntil(this.unsubscribe$),
   map(res => this.configUtilService.getArray(res)),
   map(res => _.cloneDeep(res)),
   // map((res: any) => res.sort((a, b) => a.order - b.order)),
   map(res => res.map(el => {
     el.image = this.domSanitizer.bypassSecurityTrustUrl(el.image);
     return el;
   })),
   tap((res: any[]) =>  {
     if (res.length > 1) {
       this.intervalSlider();
     }
   })
 );
Тогда не нужна начинка ngOnInit(). А в шаблоне *ngFor="let image of (banners$ | async); let i = index"

Моя мысль:
Я считаю, что в pipe не нужно делать действия, которые могут изменять шаблон компонента, плюс это усложняет тестирование.
Что думаете?
это такой же холивар как react vs angular, нужен ngrx или не нужен, и т.д. То есть это дело вкуса.

никто не запрещает выполнять в pipe функции которые что-то меняют в компоненте.
Я лично за второй вариант (с функцией в pipe), т.к. тогда будет меньше кода (без onInit, onDestroy), и async pipe будет следить за отпиской (у вас она кстати неправильно сделана, takeUntil не должен идти первым https://cartant.medium.com/rxjs-avoiding-takeuntil-leaks-fb5182d047ef )
источник

MK

Mikhail Kamakhin in Angular - русскоговорящее сообщество
:(
источник

MK

Mikhail Kamakhin in Angular - русскоговорящее сообщество
Меня нравится так: типа в одном месте преобразовываешь данные в нужный вид, а только потом делаешь действия
источник

MK

Mikhail Kamakhin in Angular - русскоговорящее сообщество
а когда всё сброшено в кучу как-то вообще :(
источник

M

Maksim in Angular - русскоговорящее сообщество
а еще, если компонент onPush, к каждому this.imageList = res.slice(); сделанному внутри subscribe придется дописывать cd.markForCheck() - еще больше кода :)
источник

MK

Mikhail Kamakhin in Angular - русскоговорящее сообщество
Maksim
а еще, если компонент onPush, к каждому this.imageList = res.slice(); сделанному внутри subscribe придется дописывать cd.markForCheck() - еще больше кода :)
а это что?
cd.markForCheck()
источник

M

Maksim in Angular - русскоговорящее сообщество
источник

ДЗ

Даниил Зеликов... in Angular - русскоговорящее сообщество
Roman
mapbox
спасибо. Такого не видел
источник

ス。

ステパンヤノ 。... in Angular - русскоговорящее сообщество
всем привет. такой вопрос. snapshot роута говорит что компонент DonateComponent, но когда я проверяю

route.snapshot.component instanceof DonateComponent
то дает false
источник

S

Smooth Operator in Angular - русскоговорящее сообщество
ステパンヤノ 。
всем привет. такой вопрос. snapshot роута говорит что компонент DonateComponent, но когда я проверяю

route.snapshot.component instanceof DonateComponent
то дает false
а если ===
источник

ス。

ステパンヤノ 。... in Angular - русскоговорящее сообщество
Smooth Operator
а если ===
да, так заработал. а поечму ?
источник

S

Smooth Operator in Angular - русскоговорящее сообщество
ステパンヤノ 。
да, так заработал. а поечму ?
ну там же не инстанс а класс
источник

A

Artem in Angular - русскоговорящее сообщество
О, Великое комьюнити, взываю к твоей мудрости!
Кароч, вот накидал упрощенный пример.
https://stackblitz.com/edit/angular-vds4nz?file=src/app/app.component.html

Структура проекта:
Есть два компонента(FirstComponent и SecondComponent) и родительский, который навигирует на один из них.
У SecondComponent есть вложенный компонент(CommonComponent).
И есть сервис(HelpService), который, по сути, необходим для передачи данных( в нем создается и апдейтится Observable объект)

Проблема:
Не могу разобраться почему CommonComponent не отображает данные(хотя там в ngOnInit подписка), при условии, что мы добавляем их в Observable в компоненте FirstComponent(через клик по кнопке)

По идее, в моих влажных мечтах, при клике на кнопку "CLICK" в FirstComponent и последующем переходе на SecondComponent(посредством клика на конпку "To Second Component"), я должен увидеть строчку "TEST!!!".
Где я что-то упустил? Чувствую фундаментальный продолб)
источник

ス。

ステパンヤノ 。... in Angular - русскоговорящее сообщество
Smooth Operator
ну там же не инстанс а класс
а ну да. спасибо большое ))
источник

S

Smooth Operator in Angular - русскоговорящее сообщество
Artem
О, Великое комьюнити, взываю к твоей мудрости!
Кароч, вот накидал упрощенный пример.
https://stackblitz.com/edit/angular-vds4nz?file=src/app/app.component.html

Структура проекта:
Есть два компонента(FirstComponent и SecondComponent) и родительский, который навигирует на один из них.
У SecondComponent есть вложенный компонент(CommonComponent).
И есть сервис(HelpService), который, по сути, необходим для передачи данных( в нем создается и апдейтится Observable объект)

Проблема:
Не могу разобраться почему CommonComponent не отображает данные(хотя там в ngOnInit подписка), при условии, что мы добавляем их в Observable в компоненте FirstComponent(через клик по кнопке)

По идее, в моих влажных мечтах, при клике на кнопку "CLICK" в FirstComponent и последующем переходе на SecondComponent(посредством клика на конпку "To Second Component"), я должен увидеть строчку "TEST!!!".
Где я что-то упустил? Чувствую фундаментальный продолб)
сабжект не хранит состояние
до перехода ты кидаешь событие
после перехода подписываешься только
источник

S

Smooth Operator in Angular - русскоговорящее сообщество
если бы подписывался до того как событие кидаешь, то работало бы
источник

A

Artem in Angular - русскоговорящее сообщество
Smooth Operator
сабжект не хранит состояние
до перехода ты кидаешь событие
после перехода подписываешься только
ну точняк жеж. Какой обидный продолб.
Спасибо)
источник

MK

Mikhail Kamakhin in Angular - русскоговорящее сообщество
Подскажите, пожалуйста, как мне тут написать правильно generic типы вместо any??

restResult может быть [] и {} и undefinded и String и Number
  getArray(restResult: any): any[] {
   const resultType = this.getTypeOf(restResult);
   switch (resultType) {
     case 'Array':
       return restResult.slice();
     case 'Object':
       // если объект пустой, то возвращаем [], а не [{}]
       return Object.keys(restResult).length ? [restResult] : [];
     case 'String':
     case 'Number':
       return Array.of(restResult);
     case 'Undefined':
       return [];
     default:
       console.warn(`Impossible get array from ${resultType}! Return empty array.`);
       return [];
   }
 }

 private getTypeOf<T>(obj: T): string {
   return {}.toString.call(obj).slice(8, -1);
 }
источник

ЕВ

Евгений Войтенко... in Angular - русскоговорящее сообщество
Коллеги, добрый день. А есть ли где мануал с бест практисами по ангуляру? Как правильно строить архитектуру и прочее? Я хочу такой сделать, не хочу избрать велосипед. Идея дать новому разработчику мануал, он его прочитал и через неделю при код ревью у него код такой же как и у тебя.
источник

A

Artem in Angular - русскоговорящее сообщество
Евгений Войтенко
Коллеги, добрый день. А есть ли где мануал с бест практисами по ангуляру? Как правильно строить архитектуру и прочее? Я хочу такой сделать, не хочу избрать велосипед. Идея дать новому разработчику мануал, он его прочитал и через неделю при код ревью у него код такой же как и у тебя.
источник