"TypeError: невозможно прочитать свойство 'type' of undefined" при рефакторинге сервиса анимации - PullRequest
Новая
       59

"TypeError: невозможно прочитать свойство 'type' of undefined" при рефакторинге сервиса анимации

0 голосов
/ 02 июля 2019

Я новичок в Angular 7 / TypeScript и создаю приложение с анимацией перехода маршрута.Я следовал рекомендациям Angular Router Transimation Animations , но я пытаюсь реорганизовать его, потому что у меня есть несколько переходов маршрута, которые определены с помощью анимации слайдов, и я не хочу переписывать эту анимацию слайдов длякаждый переход.Я установил два файла: сервис слайдов (slide-animations.service.ts), который объявляет функцию slideTo () как метод, и файл анимации (animations.ts), который экспортирует const slideInAnimation, использующийСлужба slideTo ().

Вот это animations.ts: 


import { trigger, transition } from '@angular/animations';
import { SlideAnimationsService } from './slide-animations.service';

export const slideInAnimation =
    trigger('routeAnimations', [
        transition('* => Welcome', SlideAnimationsService["slideTo('left')"]),
        transition('CaseStudy => *', SlideAnimationsService["slideTo('left')"]),
        transition('* <=> *', SlideAnimationsService["slideTo('right')"])
    ]);

А вот и слайд-animations.service.ts: 


import { Injectable } from '@angular/core';
import { query, style, animate, group, animateChild } from '@angular/animations';

@Injectable({
  providedIn: 'root'
})
export class SlideAnimationsService {
   slideTo(direction: string) {
    const optional = { optional: true };
    return [
    style({ position: 'relative' }),
    query(':enter, :leave', [
      style({
        position: 'absolute',
        top: 0,
        [direction]: 0,
        width: '100%'
      })
    ], optional),
    query(':enter', [
      style({ [direction]: '-100%'})
    ], optional),
    query(':leave', animateChild(),  optional),
    group([
      query(':leave', [
        animate('500ms ease-out', style({ [direction]: '100%'}))
      ],  optional),
      query(':enter', [
        animate('500ms ease-out', style({ [direction]: '0%'}))
      ],  optional)
    ]),
    query(':enter', animateChild(), optional)]
   }
}

Эти файлы компилируются вVScode, но когда я пытаюсь использовать ng serve, я получаю следующие ошибки консоли:

AppComponent_Host.ngfactory.js?[sm]: 1 ОШИБКА TypeError: Невозможно прочитать свойство 'type' из неопределенного

main.ts: 12 TypeError: Невозможно прочитать свойство 'type' из неопределенного

Я уверен, что есть что-то, что яЯ скучаю по тому, как я строю кусочки здесь, но я не могу понять это из других подобных проблем на SO.Почему я создаю неопределенный тип и какие возможные решения я могу найти?

Спасибо!

...