角度2の複数のテンプルと同じロジック

私の角型アプリでは、私はデータを表示するための2つの異なるレイアウトを実装するコンポーネントを持っています。 1）masonaryのレイアウト 2）リストビュー。角度2の複数のテンプルと同じロジック

したがって、コンテンツテンプルは次のようになります。

<div> 
    <!--Layout one--> 
    <div *ngIf="isGrid"> 
     <div *ngFor="let test of testData"> 
     <layout-one-template [data]="test"></layout-one-template> 
     </div> 
    </div> 
<!--Layout one ends--> 

<!--Layout two starts--> 
    <div *ngIf="isList"> 
     <div *ngFor="let test of testData"> 
     <layout-two-template [data]="test"></layout-two-template> 
     </div> 
    </div> 
<!--Layout two ends--> 
</div>

両方のレイアウトが異なるだけで、どちらの機能も同じです。

これらのレイアウト用に別々のコンポーネントを作成しました。どのように私は両方のコンポーネントに同じ機能を使用することができます。私は同じ機能とデータを2つの異なるcomponent.tsファイルに保存したくありません。私は私の質問を正しく置くことができたと思います。テンプレートがコンポーネントスコープに残る方法はありますか？

おかげ

出典

2017-11-30 Shruti Nair

でifthenelseを理解することができ、角度のドキュメントを見ることができ

Chek this post

同じ機能を持っていますか？ – mickaelw

OOP継承を使用できます。

レイアウト1テンプレートとレイアウト2テンプレートコンポーネントで拡張されたクラスBaseLayoutTemplateがあります。サンプルについて

：あなたはBaseLayoutTemplateのコンストラクタの引数を持っていない場合は

export class BaseLayoutTemplate { 
    doSomething() { 
    .... 
    } 
    protected doSomething2() { 
    .... 
    } 
} 

export class LayoutOneTemplateComponent extends BaseLayoutTemplate { 
    constructor(){ 
    super() 
    } 
    myFunctionInLayoutOneTemplate(){ 
    this.doSometing() 
    } 
} 

export class LayoutTwoTemplateComponent extends BaseLayoutTemplate { 
    constructor(){ 
    super() 
    } 
    myFunctionInLayoutTwoTemplate(){ 
    this.doSometing() 
    this.doSometing2() 
    } 
}

super()は必要ありません。もしあなたがそれを持っていれば、スーパークラスはマザークラスのコンストラクタの同じ順序で同じ引数を取る。

メソッドがビューからアクセスできないようにするには、メソッド名の前にprotectedを使うことができる。 BaseClassの方法を拡張したクラスに定義されない必要がある場合は、抽象クラスやメソッドを使用することができます

：https://www.typescriptlang.org/docs/handbook/classes.html

出典

2017-11-30 12:35:22 mickaelw