角2：コンポーネントの機能をオーバーライド

Question

私は角2を初めて使いました。私の問題の一部は、これが正確に何の下にあるのかわからないため、どこで調査するのか分かりません。

保存ボタンコンポーネントを作成しています。これはアプリ全体で10回以上存在し、各ビューで同じ外観と場所を持ちます。ただし、save関数は少し異なります。クリックする場所に基づいて独自のフォーム検証が必要になることがあります。

保存ボタンコンポーネントは、現時点では、超リーンであり、私がやりたいのは何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 { 

} 

角度素材を使用していますが、親に位置いくつかのローカル保存機能へのルートデフォルトのクリック動作が含まれていますテンプレートでこの保存コンポーネントを使用するコンポーネント。このsaveボタンコンポーネントを使用するには、私は（理論的に）テンプレートにスティックし、ディレクティブをインポート/リストし（おそらくプロバイダをリストする）、そのコンポーネントの保存関数を上書きしますsaveClickなどと呼ばれることもあります）。

これを達成するために、これが角度2で使用するものは本当にわかりません... EventEmitter？出力？プロバイダ？

私は

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

...私はコンポーネントを保存し、これを使用するときだけでこれを行うことによって、このを回避することも可能だろう。しかし、私はむしろ、角度2が私を与えることを添えもののすべてを使用します。どんな方向/助けも大歓迎です！

Answer 1

再利用可能なUIコンポーネントを作成しているように見えるので、保存アクション/ビヘイビアはそのコンポーネントの一部ではありません。 （抽象的な）「保存」コンポーネント関数をオーバーライドしようとするのは、角度のあるコンポーネントアプローチ（ユーザーアクションが発生したときにイベントを発生させる）ではなく、オブジェクト指向の設計アプローチです。

だから、私はあなたが言及したように、いずれかの既存の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を好んでいます。私たちのコンポーネントは、サーバーからデータを取得せず、ユーザーの入力を検証せず、コンソールに直接ログしません。そのようなタスクをサービスに委任します。