angular - 解析器在组件的 ngoninit 之后执行
问题描述
我有以下组件,我正在尝试使用解析器进行设置,因此数据应该从解析器中填充。每当我运行应用程序时,都没有数据,并且使用调试器,ngoninit 在解析器中的断点之前被命中。还有数据,因为我可以订阅 ngonint 中的服务并取回数据,而无需使用解析器。
我的路线:
export const appRoutes:Routes = [
{ path: 'application', component: ApplicationListComponent, resolve: {applications: ApplicationListResolver}},
{ path: '', redirectTo: '/application', pathMatch: 'full'}
];
我的解析器:
import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { ApplicationService } from '../../service/application.service';
@Injectable()
export class ApplicationListResolver implements Resolve<any> {
constructor(private _applicationService: ApplicationService) { }
// Resolver automatically subscribes to an observable call that it gets
resolve() {
return this._applicationService.getApplications();
}
}
我的组件:
import { IApplication } from './../entities/application.model';
import { ApplicationService } from './../service/application.service';
import { Component, OnInit } from '@angular/core';
import { map } from 'rxjs/operator/map';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'oats-application-list',
templateUrl: './application-list.component.html',
styleUrls: ['./application-list.component.css']
})
export class ApplicationListComponent implements OnInit {
applications: IApplication[];
constructor(private route:ActivatedRoute) { }
ngOnInit() {
this.applications = this.route.snapshot.data['applications'];
// this._applicationService.getApplications().subscribe((data:IApplication[]) => {
// this.applications = data;
// });
}
}
我的服务:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/RX';
import { catchError } from 'rxjs/operators';
import { IApplication } from '../entities/application.model';
@Injectable()
export class ApplicationService {
constructor(private http: HttpClient) { }
getApplications():Observable<IApplication[]>{
return this.http.get<IApplication[]>('http://localhost/myapp/api/application')
.pipe(catchError(this.handleError<IApplication[]>('getApplications', [])));
}
// operation is the method that triggered this, result the default value when there is error (optional)
private handleError<T> (operation = 'operation', result?: T) {
// function which takes an error of type any and returns an Observable of type T
return (error: any): Observable<T> => {
console.error(error);
return Observable.of(result as T); // return the result cast to type T
}
}
}
解析器不应该先被击中,然后是组件吗?如果我从我的路由中删除 path: '' 并直接点击 localhost:4200/application url,我会得到相同的结果。
解决方案
我发现了问题,我错过了路由器插座。
推荐阅读
- javascript - 安全地将可自定义的“跟踪代码”字段添加到 php Web 应用程序
- javascript - 将滚动重置到模式框的顶部并在模式框打开时从主页中删除滚动
- python - discord.py 自动刷新嵌入
- angular - 使用 Okta 的 SPA 和 Spring Boot 身份验证
- javascript - Aframe 3d 模型在其物理框架之外出现故障
- javascript - 用 javascript 搜索和替换 css #color(无类)
- django - 如何为匿名用户添加暗模式
- java - 如何从扩展 RelativeLayout 的类更改 Activity 中的 Textview 文本
- linux - docker 如何在现有的主机操作系统内核之上支持多个 Linux 发行版?
- macos - 为什么我的 Mac 不能在 1000 端口上运行服务器?