Angular：覆盖组件的功能

Question

我是Angular的新手，我的一部分问题是我不知道究竟是什么，所以我不知道在哪里研究。

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

保存按钮组件目前非常精简并使用Angular Material。

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中用什么来实现这个... EventEmitter？输出？供应商？

我知道只要我使用这个保存组件，我就可以回避这个问题...

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

但我宁愿使用Angular给我的所有铃声和口哨声。任何方向/帮助非常感谢！

Answer 1

看起来您正在创建可重用的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

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