Angular 6 Universal 不等待解析器完成 [英] Angular 6 Universal does not wait for finishing resolver
本文介绍了Angular 6 Universal 不等待解析器完成的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我刚刚安装了 Angular Universal 入门工具包版本 6 并在其中创建了我的组件.此组件应在加载时通过 API 获取用户信息并将其显示以供查看.
I just installed Angular Universal start kit version 6 and created my component in it. This component should get users info by an API on load and show it to view.
问题是 API 结果显示在浏览器中，但未显示在查看源代码"中.万能的好处是什么?！
Problem is the API result is showing in the browser but not show in "view source". What is the Universal benefit so?!
我的getUserscommcomponent代码:
@Component({
selector: 'app-get-users',
templateUrl: './get-users.component.html',
styleUrls: ['./get-users.component.css'],
providers: [HttpClient]
})
export class SportFixturesComponent implements OnInit {
ngOnInit() {
this.route.params.subscribe(params => {
this.route.data.subscribe( data =>{
if (data) {
this.usersList = data;
}else{
this.usersList = [];
}
})
});
}
}
在 app.module.ts 代码中:
import { getUserscommponent } from './get-users-component';
import { getUsersResolver } from './get-users-resolver';
@NgModule({
declarations: [
AppComponent,
getUserscommponent
],
imports: [
BrowserModule.withServerTransition({appId: 'my-app'}),
RouterModule.forRoot([
{ path: '', component: HomeComponent, pathMatch: 'full'},
{
path: 'get-users',
component: SportFixturesComponent ,
resolve : {fxResolvedList:getUsersResolver} ,
pathMatch: 'full'
}
]),
TransferHttpCacheModule,
HttpModule,
HttpClientModule
],
providers: [getUsersResolver],
bootstrap: [AppComponent]
})
export class AppModule { }
在 get-users-resolver 代码中:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ActivatedRoute , Router , Resolve , ActivatedRouteSnapshot , RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
@Injectable()
export class getUsersResolver implements Resolve<any>{
constructor(private router: Router,private route: ActivatedRoute,private httpClient:HttpClient){}
resolve(route: ActivatedRouteSnapshot , state: RouterStateSnapshot): Observable<any>|Promise<any>|any {
interface fxInterface{
status : boolean ,
users : any
}
return this.httpClient.post("/api/get-users" , {} , {})
}
}
当我查看例如关于我们的来源时，我看到:
When I view source of for example About Us I see:
<router-outlet></router-outlet>
<app-about-view>
<h3>About Us text... </h3>
</app-about-view>
</app-root>
但是当我查看源代码时，我获取用户组件看到:
But when I view source I Get Users Component see:
<router-outlet></router-outlet></app-root>
即使没有
你能帮我解决这个问题吗.
Could you please help me to figure this out.
已
经过一些编辑后，现在出现此错误:
ERROR { Error: Uncaught (in promise): Error
at resolvePromise (webpack:///./node_modules/zone.js/dist/zone-node.js?:813:31)
at resolvePromise (webpack:///./node_modules/zone.js/dist/zone-node.js?:770:17)
at eval (webpack:///./node_modules/zone.js/dist/zone-node.js?:872:17)
at ZoneDelegate.invokeTask (webpack:///./node_modules/zone.js/dist/zone-node.js?:420:31)
at Object.onInvokeTask (webpack:///./node_modules/@angular/core/fesm5/core.js?:3934:33)
at ZoneDelegate.invokeTask (webpack:///./node_modules/zone.js/dist/zone-node.js?:419:36)
at Zone.runTask (webpack:///./node_modules/zone.js/dist/zone-node.js?:187:47)
at drainMicroTaskQueue (webpack:///./node_modules/zone.js/dist/zone-node.js?:594:35)
at ZoneTask.invokeTask (webpack:///./node_modules/zone.js/dist/zone-node.js?:499:21)
at Server.ZoneTask.invoke (webpack:///./node_modules/zone.js/dist/zone-node.js?:484:48)
at emitTwo (events.js:126:13)
at Server.emit (events.js:214:7)
at parserOnIncoming (_http_server.js:619:12)
at HTTPParser.parserOnHeadersComplete (_http_common.js:115:23)
rejection: [Error],
promise: ZoneAwarePromise { __zone_symbol__state: 0, __zone_symbol__value: [Error] },
zone:
Zone {
_properties: { isAngularZone: true },
_parent:
Zone {
_properties: {},
_parent: null,
_name: '<root>',
_zoneDelegate: [Object] },
_name: 'angular',
_zoneDelegate:
ZoneDelegate {
_taskCounts: [Object],
zone: [Circular],
_parentDelegate: [Object],
_forkZS: null,
_forkDlgt: null,
_forkCurrZone: [Object],
_interceptZS: null,
_interceptDlgt: null,
_interceptCurrZone: [Object],
_invokeZS: [Object],
_invokeDlgt: [Object],
_invokeCurrZone: [Circular],
_handleErrorZS: [Object],
_handleErrorDlgt: [Object],
_handleErrorCurrZone: [Circular],
_scheduleTaskZS: [Object],
_scheduleTaskDlgt: [Object],
_scheduleTaskCurrZone: [Circular],
_invokeTaskZS: [Object],
_invokeTaskDlgt: [Object],
_invokeTaskCurrZone: [Circular],
_cancelTaskZS: [Object],
_cancelTaskDlgt: [Object],
_cancelTaskCurrZone: [Circular],
_hasTaskZS: [Object],
_hasTaskDlgt: [Object],
_hasTaskDlgtOwner: [Circular],
_hasTaskCurrZone: [Circular] } },
task:
ZoneTask {
_zone:
Zone {
_properties: [Object],
_parent: [Object],
_name: 'angular',
_zoneDelegate: [Object] },
runCount: 0,
_zoneDelegates: null,
_state: 'notScheduled',
type: 'microTask',
source: 'Promise.then',
data: ZoneAwarePromise { __zone_symbol__state: 0, __zone_symbol__value: [Error] },
scheduleFn: undefined,
cancelFn: null,
callback: [Function],
invoke: [Function] } }
推荐答案
在我的情况下，我通过添加检查来修复它，浏览器是否进入解析返回，例如:
In my case I fixed it by adding checking is it Browser into resolve return, like:
// resolver.ts
import { Injectable, PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
...
...
export class ContentResolverService implements Resolve<Observable<any>> {
constructor(
@Inject(PLATFORM_ID) private platformId: Object
private http: HttpClient,
) {}
resolve() {
return isPlatformBrowser(this.platformId) ? this.http.get('some-url') : null;
}
}
...
这篇关于Angular 6 Universal 不等待解析器完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
