Question

目前，我开发了一个简单的用户界面，允许用户从列表中选择一个选项。现在的问题是我创建的角度服务在页面渲染后传递数据，因此下拉列表从不从服务中获取数据。

一开始我一直在使用端点调用来自角度服务的api服务，该服务传递数据以填充下拉列表，如果我在本地使用它可以正常工作。当我尝试从远程服务器错误（如mLab或MongoDB Atlas服务）获取信息时出现错误。在最后一种情况下，信息到达但在页面呈现后，下拉列表从不显示选项。

阅读互联网和文档，我发现使用角度解析器可以帮助获取以前加载页面的数据，但直到现在我还无法找到它的工作原理。也许有人可以帮我这个吗？

文档-list.component.ts

import { Component, OnInit } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import { HttpClient } from '@angular/common/http';
import { ActivatedRoute, Router } from '@angular/router';
import 'rxjs/add/operator/toPromise';
import swal from 'sweetalert2';
import { DocumentationService } from '../documentation.service';
import { Logger } from '../logger.service';

@Component({
    selector: 'app-docs-list',
    templateUrl: './docs-list.component.html',
    styleUrls: ['./docs-list.component.css']
})
export class DocsListComponent implements OnInit {

  urlSelected = '';
  docsAvailable = [
  ];

  constructor(private router: Router,
              private route: ActivatedRoute,
              private http: HttpClient,
              private documentationService: DocumentationService) { }

  ngOnInit() {

    this.docsAvailable = this.route.snapshot.data['docs'];
    console.log(this.docsAvailable);
  }

  onChange(value) {
    // console.log(value);
    this.urlSelected = value;
  }
}

文档-resolver.service.ts

 import { Injectable } from '@angular/core';
 import { Router, Resolve, ActivatedRouteSnapshot } from '@angular/router';
 import { DocumentationService } from './documentation.service';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map';

 @Injectable()
 export class DocumentationResolver implements Resolve<any> {
    constructor(
        private documentationService: DocumentationService,
        private router: Router
    ) { }

    resolve(route: ActivatedRouteSnapshot): Observable<any> {
    return this.documentationService.getDocs().map(docs => {
        console.log(docs);
        return docs;
    });
}
}

documentation.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import { Logger } from './logger.service';

const httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class DocumentationService {

  constructor(
    private http: HttpClient,
    private logger: Logger) { }

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

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { HttpClientModule } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { DocsListComponent } from './docs-list/docs-list.component';
import { FormsModule } from '@angular/forms';

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

const appRoutes: Routes = [
  { path: '',
     component: DocsListComponent,
    resolve: {
       docs: DocumentationResolver
    }
  }
];

@NgModule({
  declarations: [
    AppComponent,
     DocsListComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot(
      appRoutes,
      {enableTracing: true}
    )
  ],
   providers: [
     Logger,
     DocumentationService,
     DocumentationResolver
   ],
   bootstrap: [
     AppComponent
   ]
 })
 export class AppModule { }

提前致谢。

Angular 5路由器解析器无法获取数据

0 个答案: