Angular 5路由Resolver无法获取数据，下拉框无选项求助

嘿，我仔细看了你的代码，发现几个关键问题导致Resolver没生效，下拉框加载不到数据，咱们一个个来修复：

1. 导入路径的低级错误（最关键！） #

看你的app.module.ts里的Resolver导入：

import { DocumentationResolver } from './documentation- resolver.service';

这里documentation-后面多了一个空格！应该改成：

import { DocumentationResolver } from './documentation-resolver.service';

这个错误会导致Angular找不到Resolver服务，自然不会在路由加载前获取数据，组件里的route.snapshot.data['docs']就会是undefined，下拉框自然没数据。

2. 远程API路径问题 #

你的documentation.service.ts里的getDocs()用的是相对路径'documents'：

getDocs(): Observable<any> {
  return this.http.get('documents');
}

本地开发时，前端和API可能同域名，相对路径没问题，但切换到mLab或MongoDB Atlas的远程服务器时，必须使用完整的API请求地址，比如：

getDocs(): Observable<any> {
  // 替换成你的远程API实际地址
  return this.http.get('https://your-remote-server-endpoint/documents');
}

如果路径不对，API请求会失败，Resolver拿不到数据，下拉框还是空的。

3. 完善Resolver的错误处理 #

目前你的Resolver没有处理API请求失败的情况，一旦请求出错，路由会一直处于挂起状态，页面也无法正常加载。我们可以添加错误处理逻辑，给用户提示并导航：

// 在documentation-resolver.service.ts中修改resolve方法
resolve(route: ActivatedRouteSnapshot): Observable<any> {
  return this.documentationService.getDocs()
    .map(docs => {
      console.log('Resolver获取到的数据：', docs);
      // 检查数据是否存在
      if (docs && docs.length > 0) {
        return docs;
      } else {
        swal('提示', '没有找到可用的文档数据', 'warning');
        this.router.navigate(['/']);
        return Observable.of(null);
      }
    })
    .catch(error => {
      console.error('加载文档数据失败：', error);
      swal('错误', '无法加载文档数据，请稍后重试', 'error');
      this.router.navigate(['/']);
      return Observable.of(null);
    });
}

记得要导入catch操作符和Observable.of：

import 'rxjs/add/operator/catch';
import { Observable } from 'rxjs/Observable';

4. 确认模板绑定正确 #

最后，确保你的下拉框模板正确绑定了docsAvailable数组，比如：

<!-- docs-list.component.html -->
<select [(ngModel)]="urlSelected" (change)="onChange($event.target.value)">
  <option *ngFor="let doc of docsAvailable" [value]="doc.url">{{doc.name}}</option>
</select>

要注意API返回的数据结构要和模板里的doc.url、doc.name对应上，如果返回的字段名不一样，要调整模板或者在Resolver里转换数据。

按照这几个步骤修改后，Resolver应该就能正常工作，在页面加载前获取到远程API的数据，下拉框也能正确显示选项啦！

内容的提问来源于stack exchange，提问作者katmel98