Angular10/9路由器:路由动画示例

分享于 

5分钟阅读

Angular

  繁體

Angular 10路由器支持在应用程序中的不同路由之间导航时添加动画,在本教程中,学习如何使用Angular 动画 API,当路由在应用程序中发生变化时播放动画。

创建Angular 10项目

在本教程中,我们假设你已经安装了Angular CLI 10,然后,你可以使用终端中的以下命令生成项目:


$ ng new angular-project

我们还需要一些组件,使用创建它们:


$ ng g c list
$ ng g c detail

添加Angular 10路由

接下来,你需要将路由添加到组件app-routing.module.ts的路由模块:



import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { ListComponent } from './list/list.component';
import { DetailComponent } from './detail/detail.component';

export const routes: Routes = [
 { path: '', component: HomeComponent },
 { path: 'list', component: ListComponent },
 { path: 'detail', component: DetailComponent },

];

@NgModule({
 imports: [
 RouterModule.forRoot(routes)
 ],
 exports: [RouterModule]
})
export class AppRoutingModule {}

app.component.html中,我们可以添加以下代码在不同的组件之间导航:


<nav>
 <a routerLink="">home</a>
 <a routerLink="list">list</a>
 <a routerLink="detail">detail</a> 
</nav>
<div>
 <router-outlet></router-outlet>
</div>

routerLink指令用于创建到路由模块中定义的路径的链接。

<router-outlet>是Angular路由器插入与当前路由匹配的组件的位置。

添加Angular动画模块:BrowserAnimationsModule

在创建路由动画之前,我们需要在主应用程序模块中导入动画模块:




import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HomeComponent } from './home/home.component';
import { ListComponent } from './list/list.component';
import { DetailComponent } from './detail/detail.component';


@NgModule({
 imports: [BrowserModule, BrowserAnimationsModule, AppRoutingModule],
 declarations: [AppComponent, HomeComponent, ListComponent,DetailComponent],
 bootstrap: [AppComponent]
})
export class AppModule { }

定义和注册Angular路由器动画

app.component.ts中,你需要定义动画,并在组件的animations数组中注册:


import { Component } from '@angular/core';
import {
 transition,
 trigger,
 query,
 style,
 animate,
 group,
 animateChild
} from '@angular/animations';

@Component({
 selector: 'my-app',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css'],
 animations: [
trigger('myAnimation', [
 transition('* => *', [
 query(
 ':enter',
 [style({ opacity: 0 })],
 { optional: true }
 ),
 query(
 ':leave',
 [style({ opacity: 1 }), animate('0.3s', style({ opacity: 0 }))],
 { optional: true }
 ),
 query(
 ':enter',
 [style({ opacity: 0 }), animate('0.3s', style({ opacity: 1 }))],
 { optional: true }
 )
 ])
]);

 ] // register the animations

})
export class AppComponent { }


首先,我们从@angular/animations模块导入一组方法,接下来在组件的动画数组中定义动画。

使用trigger()方法创建一个myAnimation触发器,这个触发器将应用于包含组件模板中路由器出口的<div>

在路由器上应用动画

定义myAnimation动画之后,我们需要应用到路由器出口


<div [@myAnimation]="o.isActivated ? o.activatedRoute : ''">
 <router-outlet #o="outlet"></router-outlet>
</div>

结论

在这个快速的Angular 10路由器动画教程中,我们已经学习了如何在Angular 10应用程序中的路由之间定义和触发动画。


相关文章