Экспортированная анимация не определена - PullRequest
Новая
       5

Экспортированная анимация не определена

0 голосов
/ 03 мая 2018

Я использую затухание анимации в моем угловом компоненте. Если я определяю анимацию внутри декоратора компонента в animations: [], она работает нормально. Однако я хочу повторно использовать анимацию в другом компоненте, поэтому я переместил ее в другой файл и экспортировал оттуда. Когда я использую эту анимацию, она выдает мою ошибку undefined. Я проанализировал это и fadeInAnimation не определено. Вот мой код:

выцветанию in.animation.ts 

import { trigger, animate, transition, style } from '@angular/animations';
export const fadeInAnimation = trigger('fadeInAnimation', [
    transition(':enter', [
        // styles at start of transition
        style({ opacity: 0 }),

        // animation and styles at end of transition
        animate('.3s', style({ opacity: 1 }))
    ]),
]);

Я импортирую эту анимацию в свой компонент следующим образом: 

import { fadeInAnimation } from './animations/fade-in.animation';
// Other imports
@Component({
    selector: 'app-some-component',
    templateUrl: './some.component.html',
    styleUrls: ['./some.component.scss'],
    animations: [ fadeInAnimation ]
})

.. и используя его в моем шаблоне компонента следующим образом: 

<div [@fadeInAnimation]>Some content</div>

Я не могу понять, почему эта анимация работает, когда я определяю ее внутри компонента, и не работает, когда я экспортирую ее из другого файла. Чего мне не хватает?

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

...