Question

我在角度6应用程序中实现角度材质标签。如果我使用材质选项卡而不绑定到routerLink，则滑动动画可以正常工作，路由器插座中的内容也能正常工作。然而，当我绑定到routerLink时，滑动动画不起作用，内容只是以一种非常笨重的方式出现。

<div class="my-3">
    <nav mat-tab-nav-bar>
        <a mat-tab-link
            *ngFor="let tab of tabs"
            [routerLink]="tab.path"
            routerLinkActive #rla="routerLinkActive"
            [active]="rla.isActive">
            {{tab.label}}
        </a>
   </nav>
</div>

<router-outlet></router-outlet>

路径在组件模板中声明：

tabs: any[] = [
    {
        label: "Details",
        path: "details"
    },
    {
        label: "Users",
        path: "users"
    }
]

这些模块是懒洋洋地加载的。

有谁知道为什么动画会中断？我已经做了一些挖掘以寻找答案。我正在从＆＃39; @ angular / platform-browser / animations＆＃39;导入BrowserAnimationsModule。在应用程序模块中，我也没有在任何地方声明任何NoopBrowserAnimations。

非常感谢任何帮助。

Answer 1

为了像常规的mat-tab-link一样在mat-tab上实现标签动画，您需要为<router-outlet>定义路线动画。

这是路线动画的一个很好的例子： https://angular.io/guide/route-animations

使用routerLink时，Angular材质选项卡动画会中断

1 个答案: