Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Angular Refactoring in Real World

797 Aufrufe

Veröffentlicht am

bitbank LT Night #3 Angularの資料

Veröffentlicht in: Ingenieurwesen
  • Als Erste(r) kommentieren

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>

×