angular 关于自定义组件事件传递

Fork Me On Github

事实事件有两种定义方式

@Output 声明事件

  1. angular 通常方式,使用 @Output()方式
ts
     
// 在组件声明一个事件
@Output() public tapped = new EventEmitter();

// 组件中触发事件
this.tapped.emit();
12345

调用组件

html
 
<app-custom (tapped)="onTapped()">
1
ts
     

public onTapped() {
    // TODO
}
12345

优点

不需要考虑事件是否有接收,同时可以被接收多次,而且可以接受父页面上的值。

缺点

没办法判断事件是否注册了,传递值只能传一个,可以把多个值合并成一个 object 传递

ts
     
// 在组件声明一个事件
@Output() public tapped = new EventEmitter<number>();

// 组件中触发事件
this.tapped.emit(1);
12345

调用组件

html
 
<app-custom (tapped)="onTapped($event)">
1
ts
     

public onTapped(e: number) {
    // TODO
}
12345

直接把方法当值传递

  1. 非正常方式,使用 @Input()方式
ts
     
// 在组件声明一个值
@Input() public tapped: () => void;

// 组件中触发事件
this.tapped && this.tapped();
12345

调用组件

html
 
<app-custom [tapped]="onTapped">
1
ts
     

public onTapped() {
    // TODO
}
12345

优点

可以同时传递多个值,可以判断是否有事件

缺点

没法同时接受父页面上的值,而且这个方法的内部 this 为子组件,所以就没法调用父组件的方法或属性。

ts
       

private refresh()

public onTapped() {
    this.refresh();   // error refresh is undefined
}
1234567
点击查看全文
标签: angular
0 469 0
在 angular 项目中实现对页面的访问控制
按下回车键,焦点移动到下一个表单或提交表单
使用ng-template 显示tree结构数据
使用 ViewContainerRef.createComponent 替代 ComponentFactoryResolver
angular 12使用 KaTex 显示 AsciiMath 格式的公式