Angular 2: Как использовать угловую анимацию для постепенного появления / исчезновения компонентов внутри <router-outlet> после начальной загрузки?

Question

На данный момент код работает как надо (но теперь, как я хочу, ха-ха). Анимация работает и исчезает, когда страница первоначально загружается и инициализируется в первый раз, но анимации не появляются, когда я обращаюсь к маршрутам внутри после того, как начальная страница исчезает. Просто интересно, как я могу реализовать свою анимацию для каждого родственного маршрута.

Любая помощь приветствуется, спасибо!

Ниже приведены файлы компонентов моего приложения, где я написал анимацию. Затем я вставил триггер в HTML.

app.component.ts

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    animations:[
        trigger('main-router', [
            state('in', style({
                opacity: 1
            })),
            transition('void => *', [
                style({opacity: 0}),
                animate(2000)
            ]),
            transition('* => void', [
                style({opacity: 0}),
                animate(2000)
            ])
        ])
    ]
})

app.component.html

<div class="router-outlet-outer" [@main-router] >
    <router-outlet>
    </router-outlet>
</div>

Answer 1

Следующая запись в блоге Кори Райлан должна ответить на все ваши вопросы.

---

На выходе маршрутизатора мы создаем ссылку на шаблон для директивы outlet с присваиванием переменной шаблона #o="outlet". С помощью этой ссылки на директиву розетки мы можем получить информацию о том, когда розетка маршрутизатора активна, чтобы запустить нашу анимацию затухания.

<main [@fadeAnimation]="o.isActivated ? o.activatedRoute : ''">
   <router-outlet #o="outlet"></router-outlet>
</main>

https://coryrylan.com/blog/introduction-to-angular-router-animations https://stackblitz.com/edit/angular-p2vuku