首页 专题 H5案例 前端导航 UI框架

Angular4 开发实战:(5) 组件通讯(@Input和@Output)

作者:TG 日期: 2017-06-11 阅读: 5514
组件通讯有两种方式:
  • 父到子
  • 子到父

(1) 父到子 父到子的数据传递其实就是通过将子组件上的一个属性绑定到父组件的一个属性上,一般我们使用@Input()属性装饰器来实现。 我们依旧使用CardComponentCardHeaderComponent两个组件:

// app/components/card-header/card-header.component.ts    

@Input() title: string;     


// app/components/card-header/card-header.component.html     

<div class="card-header">   

  {{title}}  

</div>   


// app/demo/demo-input/demo-input.component.html   

<app-card>   

  <app-card-header [title]="'这是Input输入'"></app-card-header>   

</app-card>

在上面的代码中,我们使用@Input()属性装饰器来声明输入属性tilte,然后就像内置属性一样将值赋值给[title]。 注:@Input() 装饰器支持一个可选的参数,用来指定组件绑定属性的名称。如果没有指定,则默认使用 @Input() 装饰器后面的属性名:

@Input('bindingPropertyName')

我们还可以在组件/指令等装饰器的元数据中添加:

// card-header.component.ts   

@Component({   

  inputs:['content']  

})   


export class CardHeaderComponent {   

  content: string;  

}   


// card-header.component.html   

<app-card>   

  <app-card-header [content]="'这是另外一种方式声明输入属性'"></app-card-header>   

</app-card>

别名用冒号分割:

@Component({   

  inputs:['stateActive:name2']  

})

:推荐直接使用@Input()来声明输入属性。 setter & getter方法 Angular还为输入属性提供了settergetter方法,可以让我们对输入属性值进行一些操作:

// card-header.component.ts   

export class CardHeaderComponent {   

  _count: number;   

  @Input()   

  set count(value: number) {   

    this._count = value + 1;   

  }   

  get count(): number {   

    return this._count;   

  }  

}       


// card-header.component.html   

<div>数字:{{_count}}</div>

当使用setter和getter方法时,一般都会增加一个变量(比如:_count)来赋值。 (2) 子到父的数据传递 通过事件绑定,我们就可以实现子组件向父组件传递数据,一般我们使用@Output()属性装饰器来实现。 实现步骤:首先需要在子组件中定义事件(使用EventEmitter方法),子组件的事件被触发时引发父组件的事件响应,同时将事件参数传递给父组件的响应函数,这样就完成了子组件向父组件传递数据。 我们创建CardFooterComponent

// card-footer.component.ts   

@Output() onChange: EventEmitter<string> = new EventEmitter();


onBlur(value: string) {   

  this.onChange.emit(value); // 传播事件   

}    


// card-footer.component.html   

<input type="text" (change)="onBlur($event.target.value)"> 


// demo-input.component.html   

<app-card>   

  <app-card-footer (onChange)="onChange($event)"></app-card-footer>   

</app-card>  


// demo-input.component.ts   

onChange(event: any) {   

  alert(event);   

}


在上面的代码中,使用@Output()定义了一个输出属性,然后在使用时就可以像内置事件一样使用(onChange)="onChange($event)"。当input失去焦点时,我们就能获取到值。 在上一章“属性和事件绑定”中讲过,每一个Angular事件监听函数都有一个$event参数,而自定义事件的参数也就是emit()中传递的参数。 注:@Output() 装饰器支持一个可选的参数,用来指定组件绑定属性的名称。如果没有指定,则默认使用 @Output 装饰器,装饰的属性名:

@Output('bindingPropertyName')

同样,输出属性也可以添加到组件/指令等装饰器上:

@Component({   

  outputs:['onChange']  

})   


onChange: EventEmitter<string> = new EventEmitter();

别名同样采取冒号:

@Component({   

  outputs:['stateChange:change']  

})

:推荐直接使用@Output()来声明输入属性。

如发现任何问题或有好的建议,欢迎在下方评论留言。



关注”全栈技术杂货铺“

全栈技术杂货铺