Анимация угловых вкладок материала прерывается при использовании routerLink - PullRequest
Новая
       29

Анимация угловых вкладок материала прерывается при использовании routerLink

0 голосов
/ 08 июня 2018

Я использую вкладки угловых материалов в моем приложении angular 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"
    }
]

А модули загружаются лениво.

Кто-нибудь знает, почему ломается анимация?Я немного покопался, чтобы найти ответ.Я импортирую BrowserAnimationsModule из «@ angular / platform-browser / animations» в модуле приложения, и я нигде не объявляю никакие NoopBrowserAnimations.

Любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 02 декабря 2018

Чтобы добиться анимации вкладок на mat-tab-link как на обычной mat-tab, вам необходимо определить анимацию маршрута для <router-outlet>.

Вот хороший пример анимации маршрута: https://angular.io/guide/route-animations

...