Angular 2 路由解析器不工作，浏览器空白，控制台无错误

Question

我实现了路由解析器，但整个目标组件 (events-list.component.ts) 没有显示在浏览器中。我只看到导航栏。如下所示，解析器从事件服务中获取事件列表。 Chrome 开发人员工具控制台中没有显示任何错误。我也尝试在 Firefox 浏览器中加载应用程序，但问题仍然存在。我的代码可能有什么问题？谢谢。

routes.ts 文件

'events' 路由是我遇到问题的默认路由。

import {Routes} from '@angular/router';
import { EventDetailsComponent } from './events/event-details/event-details.component';
import { EventsListComponent } from './events/events-list.component';
import { CreateEventComponent } from './events/create-event.component';
import { Error404Component } from './errors/404.guard';
import { EventRouteActivator } from './events/event-details/event-route-activator.service';
import { EventListResolver } from './events/event-list-resolver.service';

export const appRoutes: Routes = [

    {path: 'events/new', component: CreateEventComponent, canDeactivate: ['canDeactivateCreateEvent']},
    {path: 'events', component: EventsListComponent, resolve: {events: EventListResolver}},
    {path: 'events/:id', component: EventDetailsComponent, canActivate: [EventRouteActivator]},
    {path: '404', component: Error404Component},
    {path: '', redirectTo: 'events', pathMatch: 'full'}
]

event.service.ts 文件

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class EventService {

  constructor() { }

  events = [
    {
      id: 1,
      name: 'Angular Connect',
      date: '9/26/2036',
      time: '10:00 am',
      price: 599.99,
      imageUrl: '/assets/images/angularconnect-shield.png',
      onlineUrl: 'http://ng-nl.org/'
     },

    {
      id: 2,
      name: 'ng-nl',
      date: '4/15/2037',
      time: '9:00 am',
      price: 950.00,
      imageUrl: '/assets/images/ng-nl.png',
      location: {
        address: 'The NG-NL Convention Center & Scuba Shop',
        city: 'Amsterdam',
        country: 'Netherlands'
      }
}
  ];

  getEvents(){
    let subject = new Subject();
    setTimeout(() => {subject.next(this.events); subject.complete;}, 2000)
    return subject;
  }

  getEvent(id: number){
  return this.events.find(event => event.id === id);
  }
}

resolver.service.ts 文件

import { Injectable } from "@angular/core";
import { EventService } from '../shared/event.service';
import { Resolve } from '@angular/router';
import { map } from 'rxjs/operators'

@Injectable({
    providedIn: 'root'
})

export class EventListResolver implements Resolve<any>{

    constructor(private eventService: EventService){

    }

    resolve() { 
        return this.eventService.getEvents().pipe(map(events => events));
    }

}

事件-list.component.ts文件

import { Component, OnInit } from '@angular/core';
import { EventService } from '../shared/event.service';
import { ToastrService } from '../shared/toastr.service';
import { ActivatedRoute } from '@angular/router';

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

  events: any[];

  constructor(private eventService: EventService, private toastrService: ToastrService, private route: ActivatedRoute) { }

  ngOnInit() {
    this.events = this.route.snapshot.data['events'];
  }

  handleThumbnailClick(eventName){
  this.toastrService.success(eventName)
  }
}

事件-list.component.html

<div>
    <h1>Upcoming angular events</h1>
    <hr>
    <div class="row">
      <div class="col-md-5" *ngFor="let event of events" >
        <event-thumbnail [event]="event" (click)="handleThumbnailClick(event.name)"></event-thumbnail>
      </div>
    </div>
  </div>

我什至没有看到 h1 标签的文本 "Upcoming angular events"。我只看到导航栏，然后页面的其余部分是空白的。

events-app.component.ts 文件（主要引导组件）

import { Component } from '@angular/core';

@Component({
  selector: 'events-app',
  template: `<nav-bar></nav-bar>
  <router-outlet></router-outlet>`,
  //styleUrls: ['./app.component.css']
})
export class EventsAppComponent {
  title = 'ng-fundamentals';
}

Answer 1

虽然您还没有分享您的模板，但我假设您正在尝试渲染组件的 events。如果我的理解是正确的，那么您就不会从路由数据中分配 events 。您应该执行以下操作 -

ngOnInit() {
    this.events = this.route.snapshot.data['events'];
 }

问题出在getEvents()方法中。您甚至在 subject.next() 发出值之前就是 returning 主题，同时您的解析器将在 2 秒前解析并且解析器将 return 空事件。

让我们像这样更改 getEvents() 方法 -

getEvents() {
  return of(this.events).pipe(delay(2000))
}

Answer 2

因为你甚至没有看到静态的 <h1> 标签，event-list.component 本身没有被实例化（因为没有路由到那个组件）。路由解析器可能没有返回正确的 observable/promise

你能试试下面的代码吗 -

event.service.ts

getEvents(){
  return of(this.events).pipe(delay(2000)); //if you need delay
}

resolver.service.ts

resolve(){
  return this.eventService.getEvents();
}

并在event-list.component.tsngOnInit中调试，是否解析events数据

Angular 2 路由解析器不工作，浏览器空白，控制台无错误

Angular 2 route resolver not working, browser blank and no errors in console

angular

angular-routing

angular-router

angular-resolver