Angular 2：重写组件的函数

问题描述：

我是Angular 2的新手，我的问题的一部分是我不知道究竟究竟是什么，所以我不知道在哪里研究。Angular 2：重写组件的函数

我正在构建一个保存按钮组件。这在我们的应用程序中存在10次以上，并且在每个视图中具有相同的外观和位置。但是，保存功能会有所不同，可能需要基于您点击的地方进行一些独特的表单验证。

保存按钮组件是目前超瘦肉和使用尖角的材料2.

import * as save from './buttonSave'; 

import './buttonSave.component.less'; 

@save.Component({ 
    selector: 'ui-buttonSave', 
    template: 
` 
<button md-fab color="accent"> 
    <md-icon class="md-24">save</md-icon> 
</button> 
`, 
    directives: [save.MdButton, save.MdIcon], 
    viewProviders: [save.MdIconRegistry] 
}) 

export class ButtonSaveComponent { 

}

我想什么做的是包括默认的点击行为路线位于父一些地方保存功能在模板中使用此保存组件的组件。要使用这个保存按钮组件，理论上我需要做的就是将它粘贴到模板中，导入/列出指令（可能列出提供者？），然后覆盖该组件的保存功能（也许它可以称为saveClick或其他）。

我真的不知道这会用在Angular 2中来实现这个... EventEmitter？输出？供应商？

我知道，每当我用这个保存组件我可以只是这样做回避这个...

<ui-buttonSave (click)="localSave($event)"></ui-buttonSave>

但我宁愿用所有的花俏角2给我的。任何方向/帮助非常感谢！

答

看起来您正在创建可重用的UI组件，因此保存操作/行为不应该（不能）成为该组件的一部分。试图覆盖（抽象）“保存”组件函数更多的是面向对象的设计方法，而不是Angular组件方法（即在发生某些用户操作时发出事件）。

所以，我建议你委托的动作/行为保存到父，就像你提到的，无论是通过结合到现有的DOM click事件：

<ui-buttonSave (click)="save($event)"></ui-buttonSave>

或定义并绑定到一个自定义事件（这将需要EventEmitter）：

<ui-buttonSave (saveRequested)="save($event)"></ui-buttonSave>

关于验证用户输入，这里的东西从文档考虑：https://angular.io/docs/ts/latest/guide/architecture.html#!#services

我们更喜欢我们的组件类精益。我们的组件不从服务器获取数据，它们不验证用户输入，并且不直接登录到控制台。他们将这些任务委托给服务。

Angular 2：重写组件的函数

相关推荐