Блог

Я создал преобразователь, и мой код работает очень хорошо. Но мне интересно, есть ли какой-либо способ выполнить рефакторинг в моем компоненте TS, поскольку теперь я получаю данные из своего преобразователя, но каждый раз, когда я пытаюсь стереть несколько вещей, которые я считаю бесполезными сейчас, мое приложение прерывается. Вот мой преобразователь :

 @Injectable()
export class MatchTableListResolver implements Resolve<MatchTable[]> {
    constructor(private readonly matchTablesService: MatchTablesService
                ) {}

    resolve(route: ActivatedRouteSnapshot, _state: RouterStateSnapshot): Observable<MatchTable[]> {
        console.log("inside resolver")
        return this.matchTablesService.list().map(data => {
            console.log("tata", data); return data});

    }
}
  

и что я хотел бы изменить в своем компоненте.TS-файл :

 this.urlWatcher$ = this.route.data.pipe(
        distinctUntilChanged(),
        withLatestFrom(this.matchTables$),
        map(([params, newMatchTables]) => {
            this.page = 1;
            this.startIndex = 0;
            this.endIndex = 50;

        const matchTableFromParam = newMatchTables.find(m => m.technicalName === params['id']);
        if (matchTableFromParam) {
            this.matchTableSelected = matchTableFromParam;
            this.selectLines(this.startIndex, this.endIndex);
        } else {
            if(newMatchTables.length > 0) {
                this.matchTableSelected = newMatchTables[0];
                this.router.navigate(['/configuration/matchtables/'   this.matchTableSelected.technicalName]);
                this.selectLines(this.startIndex, this.endIndex);
            }
        }
    })
);

this.matchTableList$ = this.matchTablesService.list().pipe(
    map(matchTables => {
        matchTables = matchTables.sort((a, b) => a.name.toLocaleLowerCase() === b.name.toLocaleLowerCase() ? 0 : a.name.toLocaleLowerCase() < b.name.toLocaleLowerCase() ? -1 : 1);
        this.matchTables$.next(matchTables);
    }),
    catchError( (error: HttpErrorResponse) => {
        this.loadingError$.next(true);
        return EMPTY;
    })
);

concat(this.matchTableList$, this.urlWatcher$).subscribe();
  

Потому что я сейчас использую :

 this.listMatchTable = this.route.snapshot.data.listMatchTable;
  

Я не привык к распознавателю, но я предполагаю, что теперь, когда я получил от него данные, я смогу немного изменить ситуацию (может быть, избавиться от наблюдаемых?), Но я не знаю, с чего начать.

Вы можете получить данные и параметры из маршрута, используя поле моментального снимка

 this.id = this.route.snapshot.params['id'];
this.listMatchTable = this.route.snapshot.data.listMatchTable;
  

Затем вы можете реализовать свою логику без наблюдаемых

 this.page = 1;
this.startIndex = 0;
this.endIndex = 50;

const matchTableFromParam = this.listMatchTable.find(m => m.technicalName === this.id);
 if (matchTableFromParam) {
   this.matchTableSelected = matchTableFromParam;
   this.selectLines(this.startIndex, this.endIndex);
 } else {
   if(newMatchTables.length > 0) {
     this.matchTableSelected = this.listMatchTable[0];
     this.router.navigate(['/configuration/matchtables/'   this.matchTableSelected.technicalName]);
     this.selectLines(this.startIndex, this.endIndex);
   }
 }