Angular 2でテンプレート化可能な再利用可能なコンポーネントを作成する

多くの場合、Angular 2はエンタープライズアプリケーションで特に優れているはずだという声明を聞きました。Angular2は、必要なすべてのガジェット（依存性注入、ルーティングなど）をすぐに提供するはずだからです。 開発者は数十の異なるライブラリーではなく、Angular 2のみを学習すればよいので、このステートメントに基づいているかもしれませんが、このフレームワークの基本（基本）機能がエンタープライズアプリケーションにどれだけ適しているかを見てみましょう。



私の経験では、典型的なエンタープライズアプリケーションは、互いにわずかに異なる数百（場合によっては数千）のほぼ同一のページです。 繰り返し機能を個別のコンポーネントに分離し、パラメーターと実装されたテンプレートを使用して特定の動作を決定するのがいいと思うのは、私が考えたことだけではなかったと思います。 Angular 2が提供するものを見てみましょう。

シンプルなオプション

最初に思い浮かぶのは、特別なタグ<ng-content select = "...">を使用してDOMにコンポーネント宣言の内容を反映することです。



例として単純なウィジェットコンポーネントを使用して、このアプローチを実証しようとします。

最初の使用例：

<widget> <div class="content"> <button> Just do my job... </button> </div> <div class="settings"> <select> <option selected="true">Faster</option> <option>Slower</option> </select> </div> </widget>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そしてそれはどのように見えるか：











ウィジェットコンポーネント内で、2つの要素を定義します。

1. クラス「コンテンツ」でマーク-ウィジェットのメインコンテンツ。
2. 「設定」クラスによってマーク-ウィジェットに関連するいくつかの設定。

ウィジェットコンポーネント自体が以下を担当します。

• フレームとタイトルを描画します。
• メインコンテンツ表示モードと設定表示モードを切り替えるロジック。

次に、ウィジェットコンポーネント自体を見てみましょう。

 @Component({ selector: "widget", template: ` <style> .. </style> <div class="hdr"> <span>Some widget</span> <button *ngIf="!settingMode" (click)="settingMode = true" class="wid_btn"> Settings </button> <button *ngIf="settingMode" (click)="settingMode = false" class="wid_btn"> Ok </button> </div> <div class="cnt"> <ng-content *ngIf="!settingMode" select=".content"> </ng-content> <div *ngIf="settingMode"> Settings: <ng-content select=".settings"> </ng-content> </div> <div> `}) export class Widget { protected settingMode: boolean = false; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2つのng-contentタグに注目してください。 これらの各タグにはselect属性が含まれており、これを使用して、元のng-contentを置き換えることを目的とした要素が検索されます。 したがって、たとえば、ウィジェットを表示する場合：



<ng-content select=".settings" />



は..



に置き換えられ..



<ng-content select=".content"/>



によって..



当然、要素の検索は<widget> ... </ widget>タグに限定されますクライアントのマークアップ。 置換が見つからなかった場合、何も表示されません。 複数の要素が選択条件を満たす場合、それらすべてが表示されます。

より難しいオプション

上記のアプローチは、テンプレートコンポーネントを作成する必要がある多くの場合に正常に適用できますが、このアプローチでは不十分な場合があります。 たとえば、コンポーネントに渡されたテンプレートを異なるコンテキストで複数回表示する必要がある場合。 問題を説明するために、次のタスクを考えてみましょう。企業アプリケーションには、オブジェクトのリストを含むいくつかのページがあります。 各ページには特定のタイプのオブジェクト（ユーザー、注文など）が表示されますが、同時に各ページではオブジェクトのページ分割（ページング）が可能です。また、「削除」などのグループ操作を実行するためにオブジェクトをマークする機能もあります」 要素のページングと選択を担当するコンポーネントが必要ですが、ユーザーと注文は通常は異なる方法で表示する必要があるため、要素の表示方法は特定のページの責任のままです。これは論理的です。 同様のタスクの場合、 ng-contentは 1つのオブジェクトを別のオブジェクトの内側に表示するだけなので、もはや適切ではありませんが、表示するだけでなく、各オブジェクトの反対側のボックスもチェックする必要があります（個々のコンテキスト）。



今後、ユーザーに関する情報を表示するように構成した「リストナビゲーター」コンポーネントの例を使用して、この問題の解決策をすぐに示します（ ソースコードはこちら ）。

 <list-navigator [dataSource]="dataSource" [(selectedItems)]="selectedUsers"> <div *list-navigator-item="let i, let isSelected = selected" class="item-container" [class.item-container-selected]="isSelected" > <div class="item-header">{{i.firstName}} {{i.lastName}}</div> <div class="item-details"> Id: {{i.id}}, Email: {{i.email}}, Gender: <span [ngClass]="'item-details-gender-'+ i.gender.toLowerCase()"> {{i.gender}} </span> </div> </div> </list-navigator>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

考え方は次のとおりです。パラメーターとしてのコンポーネントは、オフセットとページサイズ（offsetとpageSize）でオブジェクトの範囲を返す関数へのリンクを受け取ります。

 [dataSource]="dataSource"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 this.dataSource = (o, p) => this._data.slice(o, o + p);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これらのオブジェクトを表示する方法を説明するテンプレートと同様に：

 <div *list-navigator-item="let i, let isSelected = selected"…
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

引数* list-navigator-itemは、マークされた要素がテンプレートであることをコンポーネントが理解できるようにするマーカーの一種です（「*」記号は、単に要素ではなくテンプレートであることを角度に示します） dataSourceによって返された範囲から次のオブジェクトを描画します。 list-navigator-itemを使用して、 2つの変数も設定します。

• let i-範囲から次のオブジェクトにリンクします。
• let isSelected = selected-この要素がチェックされているかどうかを示すブール値
  
  かどうか（後で「=選択」について説明します）。
  
  

さらに、コンポーネントはパラメータとして「選択」要素のリスト（チェックマークが付きます）を受け取り、ユーザーが選択を変更すると、コンポーネントはユーザーの選択に対応する既に更新されたリストを返します。

 [(selectedItems)]="selectedUsers"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次の類似点を描くことができます。「factory」コンポーネントをコンポーネントに渡し、コンポーネントから渡されたパラメーターを使用して新しいインターフェイス要素を作成します。 次に、コンポーネントは、ファクトリーによって作成されたインターフェース要素を内部で必要な場所に配置します（この例ではチェックマークの反対側）。



最後に、このようなコンポーネントを調理する方法を見てみましょう。 これを行うには、次の成分が必要です。

• list-navigator-item-outlet-アウトレットディレクティブ。実際には、テンプレートと現在のコンテキストを使用して新しい要素を作成します（上記のアナロジーの「ファクトリー」）（コンポーネントの内部実装の一部）。
• list-navigator-item-context —コンテキストデータ（コンポーネントの内部実装の一部）を転送するためのコンテナクラス。
• list-navigator-item-コンポーネントがテンプレート要素にアクセスするためのマーカーディレクティブ。
• list-navigator-実際には、主要な動作、つまりページングと要素の選択を実装するコンポーネントです。

リストナビゲーターアイテムアウトレット

ご注意 実際、このディレクティブは標準ライブラリに含まれているNgTemplateOutletディレクティブを複製するため必要ありませんが、何が起きているかをよりよく説明するために独自のバージョンを使用することにしました。



非常に小さなディレクティブなので、ソースコード全体を提供します。

 @Directive({ selector: "list-navigator-item-outlet" }) export class ListNavigatorItemOutlet { constructor(private readonly _viewContainer: ViewContainerRef){} @Input() public template: TemplateRef<ListNavigatorItemContext>; @Input() public context: ListNavigatorItemContext; public ngOnChanges(changes: SimpleChanges): void { const [, tmpl] = analyzeChanges(changes, () => this.template); const [, ctx] = analyzeChanges(changes, () => this.context); if (tmpl && ctx) { this._viewContainer.createEmbeddedView(tmpl, ctx); } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コンストラクターで、 ViewContainerRef型のオブジェクトのAngular 2をクエリします。 このオブジェクトを使用して、親コンポーネントの視覚要素（View）（ブラウザのDOM要素と混同しないでください）を制御できます。 ViewContainerRefのすべての機能の中で、新しい視覚要素を作成する可能性に現在関心があります。これは、次の2つの方法を使用して実行できます。

• createComponent（componentFactory：ComponentFactory <C>、...）
• createEmbeddedView（templateRef：TemplateRef <C>、コンテキスト？：C、...）

最初の方法は、「クラス」のみを手にコンポーネントを動的に作成する場合に役立ちます。 この方法は、たとえば、Angular Routerによって使用されますが、このトピックは別の投稿に値します（もちろん興味深い場合）。 次に、ユーザーを作成する2つ目のメソッドcreateEmbeddedViewに注目しましょう。 パラメーターとして、 TemplateRefと特定のコンテキストを取ります。



TemplateRefは、新しいビジュアルコンポーネントを作成するための「ファクトリ」であり、コンポーネントレイアウト（テンプレート： '...'またはtemplateUrl： "..."の<template>タグを「コンパイル」することによって取得されます）。 しかし、今まで、このタグはどこにも見られませんでした。TemplateRefはどこから来たのでしょうか？ 実際、 <template>タグがあり、「*」記号の形式で構文糖を使用して暗黙的に定義しました。

 <div *list-navigator-item="let i, let isSelected = selected"…
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

同等に

 <template [list-navigator-item]="let i, let isSelected = selected" <div …
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Angular 2は、コンポーネントレイアウトで見つかった<template>の TemplateRefを作成します。



createEmbeddedViewに戻ります。 このメソッドの2番目の引数はコンテキストです。 このオブジェクトは、テンプレートで定義された変数の値を初期化できるため、非常に重要です。

 "let i, let isSelected = selected"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでも、少し構文的な砂糖があります。Angular2のこのエントリは次のように理解します。

 "let i=$implicit, let isSelected = selected"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

つまり、この場合、 コンテキストオブジェクトには、 $ implicitとselectedの 2つのプロパティが必要です。 だから：

 export class ListNavigatorItemContext { constructor( public $implicit: any, public selected: boolean ) { } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、 list-navigator-item-outletの仕組みを理解するためのすべての知識が得られました。 テンプレートプロパティとコンテキストプロパティの両方が設定されるとすぐに、ディレクティブはコンテナ内に新しい視覚要素を作成します。



ここで、次の予約を行う必要があります。良い方法では、 ngOnChangesを再度呼び出すときに以前に作成したビジュアルコンポーネントを削除する必要がありますが、これはトレーニングの例では必要ありません。

リストナビゲーターアイテム

ここではすべてが非常に簡単です。

 @Directive({ selector: "[list-navigator-item]" }) export class ListNavigatorItem { constructor(@Optional() public readonly templateRef: TemplateRef<ListNavigatorItemContext>) { } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このディレクティブの唯一の目的は、コンパイルされたテンプレートをパブリックプロパティに渡すことです。

リストナビゲーター

最後に、すべてが開始されたメインコンポーネント。 レイアウトから始めましょう：

 <div *ngFor="let i of itemsToDisplay"> <div> <input type="checkbox" [ngModel]="i.selected" (ngModelChange)="onSelectedChange(i, $event)"/> </div> <div class="item-wrapper"> <list-navigator-item-outlet [template]="templateOutlet.templateRef" [context]="i"> </list-navigator-item-outlet> </div> </div> <div> <button (click)="onPrev()">Prev</button> <button (click)="onNext()">Next</button> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで：

 this.itemsToDisplay = this .dataSource(offset, pageSize) .map(i => new ListNavigatorItemContext( i, this.selectedItems.indexOf(i) >= 0)); … @ContentChild(ListNavigatorItem) protected templateOutlet: ListNavigatorItem;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

動作原理：

• 対応する関数（ dataSource ）へのリンクを使用してオブジェクトの次のバッチを取得し、それをitemsToDisplayに入れます
• 部分からすべてのオブジェクトをソートし（ * ngFor = "let i of itemsToDisplay" ）、各オブジェクトに対して、チェックマークと、上記のlist-navigator-item-outletを作成し、パラメーターとして受け取ります。
• • 選択されたオブジェクトとフラグ属性で構成されるコンテキスト。
  • TemplateRefへのリンク。これは、 list-navigator-itemディレクティブによって親切に提供され、リクエスト@ContentChild（ListNavigatorItem）を宣言することで見つかりました。
    
    
• list-navigator-item-outletは、渡されたテンプレートとコンテキストを使用して次のオブジェクトの視覚要素を作成します（実際のプロジェクトでNgTemplateOutletを使用することをお勧めします）。

小さな追加。

リストナビゲーターのテンプレートは非常にインタラクティブです。ボタン、チェックボックス、入力フィールドを追加し、すべてを親ページから管理できます。 以下は、 「アーカイブ」ボタンが追加された例です。このボタンのハンドラーは親ページにあり、ユーザーの状態を変更します。

 <list-navigator..> <div *list-navigator-item="let i..." > ... <button *ngIf="!i.archived" class="btn-arch" (click)="onArchive(i)">Archive</button> ... </div> </list-navigator>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

  protected onArchive(user: User){ user.archived = true; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実際、それがすべてです。 この記事では、Angular 2の標準ドキュメントをわずかに超えるトリックについて説明しているため、誰かに役立つと思います。 繰り返しになりますが、この記事に記載されている例のソースコードへのリンクを示します。 （ 「アーカイブ」ボタンのオプション ）。