【Angular教程】组件动效\u002F动态组件\u002F视图封装模式
2023-06-13 09:16:11 时间
前言:
这一篇我们一起来了解一下和组件相关的其他几个概念,上手开发Angular的项目还是难免遇到了很多的坑,工作之余的话也准备整理一下。希望可以坚持吧,初识Angular,不当之处还请指正。
正文:
组件动效
Angular默认的动画模块使用的事Web Animations规范,需要注意兼容问题。 兼容查看
- 按照惯例使用前需要导入对应的模块,我们这里需要用到动画的模块
BrowserAnimationsModule
- 模块地址:
@angular/platform-browser/animations
- 加入NgModule中:
imports: [ BrowserAnimationsModule ]
- 模块地址:
- 编写动画效果
import {
trigger,
style,
transition,
animate,
keyframes,
} from '@angular/animations';
export const flyIn = trigger('flyIn', [
transition('void => *', [
animate(
3000,
keyframes([
style({ opacity: 0, transform: 'translateX(-100%)', offset: 0 }),
style({ opacity: 1, transform: 'translateX(25px)', offset: 0.5 }),
style({ opacity: 1, transform: 'translateX(0)', offset: 1.0 }),
])
),
]),
transition('* => void', [
animate(
3000,
keyframes([
style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
style({ opacity: 1, transform: 'translateX(25px)', offset: 0.5 }),
style({ opacity: 0, transform: 'translateX(100%)', offset: 1 }),
])
),
]),
]);
- 代码中有一些似懂非懂的部分我们标注一下,代码中的星号表示状态不可见, void表示任意状态,这两个状态均为内置
- 进场动画: * => void
- 出厂动画: void => *
- keyframes: 定义我们动画的关键帧
- 将我们编写的动画加到组件上吧
- 在我们的app组件中放置一个div和两个按钮来模拟
<div [@flyIn]="isIn ? '*' : 'void'">Hello World</div>
<button (click)="in()">进场动画</button>
<button (click)="out()">出场动画</button>
- 在app组件中的@Component装饰器中新增动画相关属性:
animations: [flyIn]
,记得导入我们的flyIn动画的ts文件。 - 增加两个函数来控制分别绑定到我们html中的两个按钮上。
import { flyIn } from './flyin';
@Component({
...
animations: [flyIn],
})
export class AppComponent {
isIn: boolean = true;
// 模拟进场
in() {
this.isIn = true;
}
// 模拟出场
out() {
this.isIn = false;
}
}
- 来看一下演示动画
动态组件
前面两篇涉及到的组件都是通过标签的形式来使用的,当然也是使用频率最多的一种方式,但在Angular中还给我们提供了另外一种组件的使用方式,通过ts代码来动态组合组件
- 动态的组件也需要我们在父组件中提供一块区域:
<div #container></div>
- 看这块代码像不像React中创建Ref
// 看这块代码像不像React中创建Ref
@ViewChild('container', { read: ViewContainerRef, static: true })
container!: ViewContainerRef;
- 定义我们实际需要挂载进来的组件,HW组件我们临时创建一个用来演示
hwComp!: ComponentRef<HelloWorldComponent>;
- 导入用于解析组件的工厂
constructor(private resolver: ComponentFactoryResolver) {}
- 解析并挂载组件
ngAfterContentInit(): void {
const comp = this.resolver.resolveComponentFactory(HelloWorldComponent);
// 将工厂解析后的组件载入到预定义的容器中
this.hwComp = this.container.createComponent(comp);
}
- 接下来我们就可以使用hwComp.instance来对加载的组件做操作了, 使用完组件后一定记得hwComp.destroy()进行销毁
视图封视图封装模式
视图封装模式
通过改变组件装饰器的
encapsulation
属性可以单独控制每个组件的封装模式
- ShadowDom: 使用浏览器原生Shadow DOM来实现,模式特点是不受全局样式影响,不影响其他组件样式
- Emulated模式(默认): 通过对CSS预处理来模拟ShadowDOM,达到样式隔离,模式的特点是接受全局样式的影像,但不影响其他组件样式
- None: 样式会加载到全局,无作用域,无法达到隔了的效果,容易发生意外情况。
结语:
本篇就写到这里,组件相关的内容还有最后一点补充的,我们下一篇见。
相关文章
- Angular 中依赖注入
- Angular 里 HTTP 请求和响应结构的拦截器(interceptors)在 SAP Spartacus 中的应用
- angular面试题及答案_angular面试
- Angular SSR 和 PWA 结合起来使用的一些现象观察
- 干货 | 一文搞懂在AlmaLinux上安装Angular JavaScript框架
- 关于 Angular 工程文件 angular.json 里的 inlineCritical 属性
- Angular 项目多国语言设置
- Angular 应用里 ng-package.json 文件的作用是什么?
- Web 前端框架:Angular 4.0.0 正式版发布
- 微软与 Google 将共同打造 Angular 2
- 使用angular写一个helloworld