这一篇我们一起来了解一下和组件相关的其他几个概念,上手开发Angular的项目还是难免遇到了很多的坑,工作之余的话也准备整理一下。希望可以坚持吧,初识Angular,不当之处还请指正。
Angular默认的动画模块使用的事Web Animations规范,需要注意兼容问题。 兼容查看
BrowserAnimationsModule
@angular/platform-browser/animations
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 }),
])
),
]),
]);
<div [@flyIn]="isIn ? '*' : 'void'">Hello World</div>
<button (click)="in()">进场动画</button>
<button (click)="out()">出场动画</button>
animations: [flyIn]
,记得导入我们的flyIn动画的ts文件。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
@ViewChild('container', { read: ViewContainerRef, static: true })
container!: ViewContainerRef;
hwComp!: ComponentRef<HelloWorldComponent>;
constructor(private resolver: ComponentFactoryResolver) {}
ngAfterContentInit(): void {
const comp = this.resolver.resolveComponentFactory(HelloWorldComponent);
// 将工厂解析后的组件载入到预定义的容器中
this.hwComp = this.container.createComponent(comp);
}
通过改变组件装饰器的
encapsulation
属性可以单独控制每个组件的封装模式
本篇就写到这里,组件相关的内容还有最后一点补充的,我们下一篇见。