Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Angular Refactoring in Real World

806 visualizaciones

Publicado el

bitbank LT Night #3 Angularの資料

Publicado en: Ingeniería
  • Sé el primero en comentar

Angular Refactoring in Real World

  1. 1. 👇
  2. 2. 🎉 🎉
  3. 3. 🎉 🎉
  4. 4. 😇
  5. 5. userInfo: any = {}; ticker: any[] = [];
  6. 6. userInfo: UserInfo | null = null; ticker: Ticker[] = [];
  7. 7. const observableData$ = of(3); const observableDataWithParam$ = (param: number) => of(10 * param); observableData$.subscribe((res) => { observableDataWithParam$(res).subscribe((data) => { console.log(data); }) });
  8. 8. const observableData$ = of(3); const observableDataWithParam$ = (param: number) => of(10 * param); observableData$.pipe( mergeMap(res) => observableDataWithParam(res)), ).subscribe((data) => { console.log(data); });
  9. 9. const observableData$ = of(3); const observableData2$ = of(5).pipe(delay(2000)); const observableDataWithParam$ = (param: number) => of(10 * param); observableData$.pipe( mergeMap((res) => observableData2$.pipe( mergeMap((res2) => observableDataWithParam$(res + res2)) )), ).subscribe((data) => console.log(data));
  10. 10. const observableData$ = of(3); const observableData2$ = of(5).pipe(delay(2000)); const observableDataWithParam$ = (param: number) => of(10 * param); combineLatest(observableData$, observableData2).pipe( mergeMap(([res, res2]) => observableDataWithParam$(res + res2)) ).subscribe((data) => console.log(data));
  11. 11. <div> <p>{{ (userInfo$ | async).id }}</p> <p>{{ (userInfo$ | async).name }}</p> <p>{{ (userInfo$ | async).age }}</p> </div>
  12. 12. <div *ngIF=”userInfo$ | async as userInfo”> <p>{{ userInfo.id }}</p> <p>{{ userInfo.name }}</p> <p>{{ userInfo.age }}</p> </div>

×