Невозможно заставить анимацию работать с md-tab-nav-bar/md-tab-link

Я переключился с MdTabGroup на MdTabGroup md-tab-nav-bar/md-tab-link, чтобы иметь возможность назначать маршруты для отдельных страниц вкладок. К сожалению, хотя я потерял анимацию слайдов в процессе (похоже, анимация для этой директивы отсутствует), поэтому я попытался имитировать поведение MdTab до сих пор без успеха.

Здесь шаблон с использованием указателей tab:

<div class="ink-results" *ngIf="model && (model | async).length > 0" >
    <nav md-tab-nav-bar>
        <a md-tab-link
            *ngFor="let browser of model | async;trackBy: trackByBrowserId"
            [routerLink]="['/results', browser.id]"
            routerLinkActive #rla="routerLinkActive"
            [active]="rla.isActive">
            {{browser.name}}
        </a>
    </nav>
    <router-outlet></router-outlet>
</div>

и здесь шаблон, который перенаправляется на:

<div class="ink-explorer">
    <div class="ink-items">
        <div class="ink-item"
            [@flyInOut]="state"
            *ngFor="let result of results | async;trackBy: trackById"
            routerLinkActive="ink-active-item">
            <a [routerLink]="[result.id]">
                <md-icon svgIcon="flask" 
                    [ngClass]="{ 'ink-failed': (result.status === 2), 'ink-pending': result.status === 4, 'ink-success': result.status === 6 }">
                </md-icon>
                <div class="ink-item-title">{{result.description}}</div>
            </a>
        </div>
    </div>
    <div class="ink-preview">
        <router-outlet></router-outlet>
    </div>
</div>

Сама анимация (flyInOut) отлично работает (протестирована в разных проектах) и выполняется один раз, когда выбрана первая вкладка

http://localhost:3000/results/<tab1>

Если я нажму на вторую вкладку после этого, я перейду к

http://localhost:3000/results/<tab2>

хорошо, но нет никакого перехода/анимации вообще. Я полагаю, что это потому, что у меня есть ровно одно state внутри компонента, и есть только один экземпляр этого компонента и, следовательно, только одно единственное состояние.

Мне интересно, что я могу с этим поделать, мне бы хотелось, чтобы эта вкладка вставляла/удаляла анимацию для моих вкладок снова. Весь проект можно найти здесь, если это любая помощь.

Ответы

Ответ 1

Основываясь на статье Angular - перезаряжайте переходы вашего маршрутизатора с помощью анимации, вы можете создавать собственные анимации маршрутизации.

Используя ту же ссылку, я создал пример кода на stackblitz.

Основные вещи, на которые стоит обратить внимание:

  1. Вам нужно будет импортировать BrowserAnimationsModule в ваш модуль
  2. router.animations.ts - для обработки анимаций в зависимости от состояния маршрута. Эти анимации основаны на state (которое является номером, 1 для первого маршрутизатора, 2 для второго маршрутизатора и т.д.) main.ts, который определен в константах routes в файле main.ts Как вы заметили, я использовал :increment и :decrement stateChangeExpr в transitions stateChangeExpr, как stateChangeExpr ниже: 
    transition(':decrement', [...]), // if state-number is decremented, this animation will be performed
transition(':increment', [...]) // if state-number is incremented, this animation will be performed
    Причина, по которой вы делаете то же, что и выше, заключается в динамической обработке всех переходов вкладок на основе их номеров состояний. Таким образом, нам не нужно обрабатывать каждый переход/анимацию отдельно для всех маршрутов/вкладок.
  3. Запустить анимацию при изменении маршрута - tab-nav-bar-basic-example.html, как tab-nav-bar-basic-example.html ниже:
<main [@routerTransition]="getState(o)">
    <router-outlet #o="outlet"></router-outlet>
</main>