【Angular教程】组件动效/动态组件/视图封装模式

简介: 【Angular教程】组件动效/动态组件/视图封装模式

前言:


这一篇我们一起来了解一下和组件相关的其他几个概念,上手开发Angular的项目还是难免遇到了很多的坑,工作之余的话也准备整理一下。希望可以坚持吧,初识Angular,不当之处还请指正。


正文:



组件动效

Angular默认的动画模块使用的事Web Animations规范,需要注意兼容问题。兼容查看

1.jpg

  1. 按照惯例使用前需要导入对应的模块,我们这里需要用到动画的模块BrowserAnimationsModule
  1. 模块地址: @angular/platform-browser/animations
  2. 加入NgModule中: imports: [ BrowserAnimationsModule ]
  1. 编写动画效果
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 }),
      ])
    ),
  ]),
]);
  1. 代码中有一些似懂非懂的部分我们标注一下,代码中的星号表示状态不可见, void表示任意状态,这两个状态均为内置
  2. 进场动画: * => void
  3. 出厂动画: void => *
  4. keyframes: 定义我们动画的关键帧
  5. 将我们编写的动画加到组件上吧
  1. 在我们的app组件中放置一个div和两个按钮来模拟
<div [@flyIn]="isIn ? '*' : 'void'">Hello World</div>
<button (click)="in()">进场动画</button>
<button (click)="out()">出场动画</button>
  1. 在app组件中的@Component装饰器中新增动画相关属性: animations: [flyIn],记得导入我们的flyIn动画的ts文件。
  2. 增加两个函数来控制分别绑定到我们html中的两个按钮上。
import { flyIn } from './flyin';
@Component({
  ...
  animations: [flyIn],
})
export class AppComponent {
  isIn: boolean = true;
  // 模拟进场
  in() {
    this.isIn = true;
  }
  // 模拟出场
  out() {
    this.isIn = false;
  }
}
  1. 来看一下演示动画

2.jpg


动态组件

前面两篇涉及到的组件都是通过标签的形式来使用的,当然也是使用频率最多的一种方式,但在Angular中还给我们提供了另外一种组件的使用方式,通过ts代码来动态组合组件

  1. 动态的组件也需要我们在父组件中提供一块区域: <div #container></div>
  2. 看这块代码像不像React中创建Ref
// 看这块代码像不像React中创建Ref
  @ViewChild('container', { read: ViewContainerRef, static: true })
  container!: ViewContainerRef;
  1. 定义我们实际需要挂载进来的组件,HW组件我们临时创建一个用来演示
hwComp!: ComponentRef<HelloWorldComponent>;
  1. 导入用于解析组件的工厂
constructor(private resolver: ComponentFactoryResolver) {}
  1. 解析并挂载组件
ngAfterContentInit(): void {
  const comp = this.resolver.resolveComponentFactory(HelloWorldComponent);
  // 将工厂解析后的组件载入到预定义的容器中
  this.hwComp = this.container.createComponent(comp);
}
  1. 接下来我们就可以使用hwComp.instance来对加载的组件做操作了, 使用完组件后一定记得hwComp.destroy()进行销毁


视图封视图封装模式


视图封装模式

通过改变组件装饰器的encapsulation属性可以单独控制每个组件的封装模式

  1. ShadowDom: 使用浏览器原生Shadow DOM来实现,模式特点是不受全局样式影响,不影响其他组件样式

3.jpg

  1. Emulated模式(默认): 通过对CSS预处理来模拟ShadowDOM,达到样式隔离,模式的特点是接受全局样式的影像,但不影响其他组件样式
  2. None: 样式会加载到全局,无作用域,无法达到隔了的效果,容易发生意外情况。


结语:


本篇就写到这里,组件相关的内容还有最后一点补充的,我们下一篇见。



目录
打赏
0
0
0
0
71
分享
相关文章
Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
|
5月前
|
🔥JSF 与 Spring 强强联手:打造高效、灵活的 Web 应用新标杆!💪 你还不知道吗?
【8月更文挑战第31天】JavaServer Faces(JSF)与 Spring 框架是常用的 Java Web 技术。本文介绍如何整合两者,发挥各自优势,构建高效灵活的 Web 应用。首先通过 `web.xml` 和 `ContextLoaderListener` 配置 Spring 上下文,在 `applicationContext.xml` 定义 Bean。接着使用 `@Autowired` 将 Spring 管理的 Bean 注入到 JSF 管理的 Bean 中。
81 0
Uno Platform 入门超详细指南:从零开始教你打造兼容 Web、Windows、iOS 和 Android 的跨平台应用,轻松掌握 XAML 与 C# 开发技巧,快速上手示例代码助你迈出第一步
【8月更文挑战第31天】Uno Platform 是一个基于 Microsoft .NET 的开源框架,支持使用 C# 和 XAML 构建跨平台应用,适用于 Web(WebAssembly)、Windows、Linux、macOS、iOS 和 Android。它允许开发者共享几乎全部的业务逻辑和 UI 代码,同时保持原生性能。选择 Uno Platform 可以统一开发体验,减少代码重复,降低开发成本。安装时需先配置好 Visual Studio 或 Visual Studio for Mac,并通过 NuGet 或官网下载工具包。
501 0
从零到全能开发者:解锁Uno Platform,一键跨越多平台应用开发的神奇之旅,让你的代码飞遍Windows、iOS、Android、macOS及Web,技术小白也能秒变跨平台大神!
【8月更文挑战第31天】从零开始,踏上使用Uno Platform开发跨平台应用的旅程。只需编写一次代码,即可轻松部署到Windows、iOS、macOS、Android及Web(通过WASM)等多个平台。Uno Platform为.NET生态带来前所未有的灵活性和效率,简化跨平台开发。首先确保安装了Visual Studio或VS Code及.NET SDK,然后选择合适的项目模板创建新项目。项目结构类似传统.NET MAUI或WPF项目,包含核心NuGet包。通过简单的按钮示例,你可以快速上手并构建应用。Uno Platform让你的技术探索之旅充满无限可能。
126 0
Angular 动画教程超赞!掌握让应用更具交互性的技巧,开启精彩的前端动画之旅!
【8月更文挑战第31天】在现代前端开发中,提升用户体验至关重要,而动画是增强应用交互性的有效手段。Angular 提供了强大的动画功能,可轻松添加各种动画效果。本文介绍了 Angular 动画的基本概念、使用动画模块、事件触发动画、动画序列与并行执行、性能优化及结合第三方动画库等最佳实践。通过遵循这些实践,可以充分发挥 Angular 动画的优势,提升用户体验。下面是一个简单的示例应用,展示了如何使用 Angular 动画实现元素的显示和隐藏效果。
82 0
前端框架与库 - Angular基础:组件、模板、服务
【7月更文挑战第16天】Angular,谷歌维护的前端框架,专注构建动态Web应用。组件是核心,包含行为逻辑的类、定义视图的模板和样式。模板语法含插值、属性和事件绑定。服务提供业务逻辑,依赖注入实现共享。常见问题涉及组件通信、性能和服务注入。优化通信、性能并正确管理服务范围,能提升应用效率和质量。学习组件、模板和服务基础,打造高效Angular应用。
73 1
如何在 Angular 中使用 NgTemplateOutlet 创建可重用组件
如何在 Angular 中使用 NgTemplateOutlet 创建可重用组件
39 0
技术经验分享:Angular动态创建组件之Portals
技术经验分享:Angular动态创建组件之Portals
|
8月前
快速创建Angular组件并定义传参、绑定自定义事件的方法
快速创建Angular组件并定义传参、绑定自定义事件的方法
|
8月前
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办?
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等