Angular 2 route resolver не работает, браузер пуст и нет ошибок в консоли - PullRequest
Новая
       27

Angular 2 route resolver не работает, браузер пуст и нет ошибок в консоли

1 голос
/ 05 июля 2019

Я реализовал распознаватель маршрутов, но весь целевой компонент (events-list.component.ts) не отображается в браузере.Я вижу только навигационную панель.Как показано ниже, распознаватель получает список событий из службы событий.И никаких ошибок не отображаются в консоли инструментов разработчика Chrome.Я также попытался загрузить приложение в браузер Firefox, но проблема все еще сохраняется.Что может быть не так с моим кодом?Спасибо.

route.ts file

Маршрут '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 file 

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 file 

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

Ответы [ 2 ]

1 голос
/ 05 июля 2019

Поскольку вы даже не видите статический тег <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

1 голос
/ 05 июля 2019

Хотя вы не поделились своим шаблоном, но я предполагаю, что вы пытаетесь отобразить events вашего компонента. Если мое понимание верно, то вы не назначаете events из данных маршрута. Вы должны сделать следующее - 

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

Проблема в getEvents() методе. Вы возвращаете тему еще до того, как subject.next() изменит значение, и тем временем ваш распознаватель разрешит до 2 секунд, и распознаватель вернет пустые события.

Давайте изменим метод getEvents() следующим образом - 

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