Угловой 2: переопределение функции компонента

Question

Я новичок в 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 дает мне. Любое направление/помощь приветствуется!

Answer 1

Похоже, вы создаете повторно используемый компонент пользовательского интерфейса, поэтому действие/поведение сохранения не должно (не может) быть частью этого компонента. Попытка переопределить (абстрактную) функцию «сохранить» компонента - скорее объектно-ориентированный подход к дизайну, чем подход с угловым компонентом (который должен излучать событие, когда происходит какое-то действие пользователя).

Итак, я предлагаю вам делегировать сохранить действие/поведение родителя, как вы упомянули, либо путем привязки к существующему событию DOM Клик:

<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

Мы предпочитаем наши классы компонентов lean. Наши компоненты не извлекают данные с сервера, они не проверяют ввод пользователя, и они не регистрируются непосредственно на консоли. Они делегируют такие задачи службам.