无法使用动画来使用md-tab-nav-bar/md-tab-link

Question

我切换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>

animation(flyInOut)本身工作正常(在不同的项目中测试),并在选择第一个选项卡时执行一次

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

如果我点击后面的第二个标签,我会导航到

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

好吧,但根本没有过渡/动画.我想这是因为我state在组件中只有一个,并且只有一个该组件的实例,因此只有这个单一的状态.

我想知道我能做些什么,我想再次为我的标签进行幻灯片进/出动画.如果有任何帮助,可以在这里找到整个项目.

Answer 1

根据Angular\xe2\x80\x8a\xe2\x80\x94\xe2\x80\x8aSupercharge your Router Transitions using Animations文章，您可以创建自己的路由动画。

\n\n

使用相同的参考，我在stackblitz上创建了示例代码。

\n\n

需要注意的关键事项：

\n\n

\n
1. 您将需要导入BrowserAnimationsModule在模块中导入
\n
2. router.animations.ts- 根据路线状态处理动画。这些动画基于路线state（即编号，第一个路由器为 1，第二个路由器为 2，依此类推。），该路线routes在文件中的常量中定义main.ts。你会注意到，我在\'s中使用了:incrementand ，如下所示： \n\n:decrementtransitionsstateChangeExpr

   transition(\':decrement\', [...]), // if state-number is decremented, this animation will be performed\ntransition(\':increment\', [...]) // if state-number is incremented, this animation will be performed\n

   \n\n这样做的原因是根据状态号动态处理所有选项卡转换。因此，我们不必为所有路线/选项卡单独处理每个转换/动画。
\n
3. 路线改变时触发动画 - tab-nav-bar-basic-example.html，如下所示：
\n

\n\n

transition(\':decrement\', [...]), // if state-number is decremented, this animation will be performed\ntransition(\':increment\', [...]) // if state-number is incremented, this animation will be performed\n

\n