事实事件有两种定义方式
@Output 声明事件
- angular通常方式,使用- @Output()方式
    
    
             
    
    // 在组件声明一个事件
@Output() public tapped = new EventEmitter();
// 组件中触发事件
this.tapped.emit();
    
        12345
    
 
调用组件
 
    
    
         
    
    <app-custom (tapped)="onTapped()">
    
        1
    
 
 
    
    
             
    
    
public onTapped() {
    // TODO
}
    
        12345
    
 
优点
不需要考虑事件是否有接收,同时可以被接收多次,而且可以接受父页面上的值。
缺点
没办法判断事件是否注册了,传递值只能传一个,可以把多个值合并成一个 object 传递
 
    
    
             
    
    // 在组件声明一个事件
@Output() public tapped = new EventEmitter<number>();
// 组件中触发事件
this.tapped.emit(1);
    
        12345
    
 
调用组件
 
    
    
         
    
    <app-custom (tapped)="onTapped($event)">
    
        1
    
 
 
    
    
             
    
    
public onTapped(e: number) {
    // TODO
}
    
        12345
    
 
直接把方法当值传递
- 非正常方式,使用 @Input()方式
    
    
             
    
    // 在组件声明一个值
@Input() public tapped: () => void;
// 组件中触发事件
this.tapped && this.tapped();
    
        12345
    
 
调用组件
 
    
    
         
    
    <app-custom [tapped]="onTapped">
    
        1
    
 
 
    
    
             
    
    
public onTapped() {
    // TODO
}
    
        12345
    
 
优点
可以同时传递多个值,可以判断是否有事件
缺点
没法同时接受父页面上的值,而且这个方法的内部 this 为子组件,所以就没法调用父组件的方法或属性。
 
    
    
               
    
    
private refresh()
public onTapped() {
    this.refresh();   // error refresh is undefined
}
    
        1234567
    
                 转载请保留原文链接:            https://zodream.cn/blog/id/202.html