は私のコードベース

Question

のコードの繰り返しを軽減しようとすると私はHTMLなどで次のパターンを持っている私のコードベースにコードの重複を削減しようとしている：

<card-component> 
    <card-header>{{entityFormName}}</card-header> 
    <card-body> 
     <form (ngSubmit)="onSubmit()" id="formId" [formGroup]="entityForm"> 
       <!-- <ng-content></ng-content> --> 
       <!-- Here I have a bunch of custom form content/formatting --> 
     </form> 
    </card-body> 
    <card-footer> 
     <!-- button outside of form --> 
     <button type="submit" form="formId" [disabled]="entityForm.invalid || loading">{{submitButtonText}}</button> 
     <!-- loading icon spinner --> 
    </card-footer> 
</card-component> 

は基本的に、私はいくつかのCRUD型を持っていますこのパターンに従ったフォームは、別のコンポーネントにすべて保持して繰り返しを減らしたいと思っています。私はonSubmit()を実装する抽象的なコンポーネントのようなクラスを持っており、entityFormとコントロールloadingを作成します。この抽象クラスから継承するクラスも、独自のフォームのカスタム動作を実装します。

事がある：どのように私はなるように、私は実際にそれを作成することができ、このフォームを実施しているものは何でもコンポーネントにentityFormを送っていますか？それも可能ですか？

また、間違った方法で近づいていますか？おそらくここでコードの繰り返しを減らすためには、より良い/異なるパターンがありますか？

ありがとうございます。

Answer 1

私はそれを理解しました。私のフォームラッパーコンポーネントで

、私は次のようしている：

export class AbstractFormComponent { 
    @Input() 
    formTitle: string; 

    @Input() 
    component: any; 

    get entityForm(): FormGroup { return this.component.entityForm; } 

    get toasterConfig(): ToasterConfig { return this.component.toasterConfig; } 

    get submitButtonText(): string { return this.component.submitButtonText; } 

    _internalSubmit() { 
    this.component.onSubmit(); 
    } 

} 

その後、私は使用することができます私のカスタムフォームの各内：このように

<custom-form formTitle="Form Title" [component]="this"> 
    <!-- form inputs, grid and etc --> 
</custom-form> 

、私のフォームが続きます内側の挙動は内側の構成要素によって制御される。

ここで注意が必要ですが、ラップコンポーネント自体を汎用化することなく汎用タイプ（つまりAbstractEntityComponent<E extends Entity, S extends Service<E>>）として宣言できないため、コンポーネントをanyオブジェクトに設定しました。