[Angular组件开发系列]如何写一个 alert 组件

• 2019-11-14 10:54:12 • 动漫资讯 • 阅读 383

这里的 alert 其实就是带标题、内容和关闭按钮的组件。

相比前面的组件，这里更复杂：

1、关闭按钮会影响模板内容的显示

2、这种从显示到隐藏会使用动画

所以核心难点其实是动画、模板内容的复杂性

先看配置：在 @Component 装饰器上又多了一个配置 animations

@Component({ selector: ‘app-alert’, animations: [fadeAnimation], templateUrl: ‘./alert.component.html’, styleUrls: [‘./alert.component.css’] })

animations 的值是数组类型

animations: any[]

一个或多个动画 trigger 调用：

包含一些 state 和 transition 定义。

好，第一个问题来了：

Please includeeither “BrowserAnimationsModule” or”NoopAnimationsModule”inyour application.

在介绍动画之前，我们需要在 app.module.ts 里面导入：

BrowserAnimationsModule

import{ BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;

然后在 @NgModule 里面：

@NgModule({ imports: [ BrowserAnimationsModule ] })

先看看我们核心的 fadeAnimation：

import{ fadeAnimation } from’./animation’;

来自同级目录下的 animation.ts，先整理看看代码：

exportconstfadeAnimation: AnimationTriggerMetadata = trigger( ‘fadeAnimation’, [] ]);

这里出现了 2 个关键点：AnimationTriggerMetadata和 trigger 函数

trigger 函数称之为“触发器”，第一个参数是触发器名字，比如我们这里的：

fadeAnimation

对于在模板里面是配合使用的：

属性绑定语法 []，然后里面是 @开头，后面是触发器名字，对于的值就是动画状态

当 visible 变量发生变化的时候，动画会再次执行~

我们再看一下 trigger 的第二个参数：数组类型，里面会出现 state 函数和transition 函数~

trigger( ‘fadeAnimation’, [ state(‘true’, style({ opacity: 0, height: 0, border: 0, padding: 0, margin: 0, visibility: ‘hidden’, })), state(‘false’, style({ opacity: 1, height: ‘*’, border: ‘*’, margin: ‘*’, padding: ‘*’, visibility: ‘inherit’, })), transition(‘* => *’, animate(`250ms ease-in-out`)) ] );

state函数是干嘛的？

定义不同的状态，接收 2 个参数：一个名字，状态名 style函数

style 函数干嘛的？

状态名对应的样式，用小驼峰 camelCase

上面我们定义了 2 个 state：true 和 false~

transition函数是干嘛的？

transition(‘* => *’, animate(`250ms ease-in-out`))

定义 2 个 state 之间的动画

也是 2 个参数，

第一个字符串，其实是一个表达式，两个转场状态之间的方向

第二个 animate 函数~

animate 的语法：