Angular

Question

我制作了一个解析器，我的代码运行得非常好。但我想知道是否有任何方法可以在我的 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});

    }
}

以及我想在我的 component.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;

我不打算与解析器一起使用，但我想现在我从它那里收到了数据，我应该能够让事情变得有点不同（也许摆脱 observables？），但我不知道在哪里开始。

Answer 1

您可以使用快照字段从路由中获取数据和参数

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

然后你可以在没有 observables 的情况下实现你的逻辑

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);
   }
 }

Angular - 启动解析器后重构可观察对象

Angular - Refactoring observables after initiating a resolver

javascript

typescript

observable

angular2-observables