angular-material - 使用 routerLink 时，角度 Material 选项卡动画会中断

Question

我在我的 Angular 6 应用程序中实现了 Angular Material 选项卡。如果我在没有绑定(bind)到 routerLink 的情况下使用 Material 选项卡，则滑动动画有效并且路由器 socket 中的内容有效。但是，当我绑定(bind)到 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"
    }
]

并且模块是延迟加载的。

有谁知道为什么动画会中断？我已经做了一些挖掘以找到答案。我正在从应用程序模块中的“@angular/platform-b​​rowser/animations”导入 BrowserAnimationsModule，并且我也没有在任何地方声明任何 NoopBrowserAnimations。

任何帮助将非常感激。

Answer 1

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

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