Question

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

routes.ts文件

“事件”路由是我遇到问题的默认路由。

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));
    }

}

event-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)
  }
}

events-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标签的文本“即将发生的角度事件”。我只看到导航栏，然后页面的其余部分为空白。

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()发出值之前就返回主题，同时您的解析器将在2秒之前解析，而解析器将返回空事件。

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

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

Answer 2

由于您甚至没有看到静态的<h1>标记，因此event-list.component本身未实例化（因为未路由到该组件）。路由解析器可能未返回正确的可观察/承诺

您可以尝试以下代码-

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.ts ngOnInit中调试，events数据是否已解析

Angular 2路由解析器不起作用，浏览器空白并且控制台中没有错误

2 个答案: