Я переключился с 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
внутри компонента, и есть только один экземпляр этого компонента и, следовательно, только одно единственное состояние.
Мне интересно, что я могу с этим поделать, мне бы хотелось, чтобы эта вкладка вставляла/удаляла анимацию для моих вкладок снова. Весь проект можно найти здесь, если это любая помощь.