Angular - 在启动解析器后重构 observables答案

【问题标题】：Angular - Refactoring observables after initiating a resolverAngular - 在启动解析器后重构 observables
【发布时间】：2020-10-08 14:57:17
【问题描述】：

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

我不适合使用解析器，但我想现在我从它接收到数据，我应该能够让事情变得有点不同（也许摆脱可观察的东西？），但我不知道从哪里开始。

【问题讨论】：

标签： javascript angular typescript observable angular2-observables

【解决方案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);
   }
 }

【讨论】：