2017-02-26 37 views
0

私はカスタムドロップダウンコンポーネントを作成しました。その内部にtemplateタグを使用して出力をスタイルしたいと考えています。たとえば、コンポーネント内にテンプレートタグを使用する角度2?

<cstm-dropdown [model]="incident.sensor" [options]="sensors" [id]="'id'">    
     <template> 
     {{option.name | localName}} 
     </template> 
</cstm-dropdown> 

これは、いくつかのパイプ変換を伴うオプションのnameプロパティを表示します。

私のコンポーネントは次のとおりです。

import { Component, Input, OnChanges } from '@angular/core'; 

@Component({ 
    selector: 'cstm-dropdown', 
    template: ` 
     <select [ngModel]="selectedOption" (ngModelChange)="onModelChange($event)" > 
     <option *ngFor="let option of options" [ngValue]="option"> 
      <!-- The template should be rendered here --> 
     </option> 
     </select> 
    ` 
}) 
export class CustomDropdownComponent implements OnChanges { 

    @Input() model: any; 

    selectedOption: any; 

    @Input() options: any[]; 

    @Input() id: any; 

    @Input() idProperties: any[]; 

    ngOnChanges() { 
    if (!this.identifyByProperty()) { 
     this.identifyByProperties(); 
    } 
    } 

    onModelChange(event) { 
    for (const key of Object.keys(event)) { 
     this.model[key] = event[key]; 
    } 
    } 

    identifyByProperty(): boolean { 
    if (!this.id) { 
     return false; 
    } 

    for (const option of this.options) { 
     if (this.model[this.id] === option[this.id]) { 
     this.selectedOption = option; 
     return true; 
     } 
    } 

    return false; 
    } 

    identifyByProperties(): boolean { 
    // if the array isn't passed 
    if (!this.idProperties) { 
     return false; 
    } 
    // if the passed array is empty 
    if (!this.idProperties.length) { 
     return false; 
    } 

    for (const option of this.options) { 
     if (this.arePropertiesIdentical(option)) { 
     this.selectedOption = option; 
     return true; 
     } 
    } 

    return false; 
    } 

    arePropertiesIdentical(option: any): boolean { 
    for (const prop of this.idProperties) { 
     if (this.model[prop] !== option[prop]) { 
     return false; 
     } 
    } 
    return true; 
    } 

} 

私はTemplateRefを使用する必要があることを読んで、それをテンプレートを行う方法上の任意のチュートリアルをfimdことができませんでした。すべてのヘルプは歓迎される:)

+1

http://stackoverflow.com/questions/39974126/how-to-pass-an-expression-to-a-component-as-an-input-in-angular2 http://stackoverflow.com/questions/39561688/ nested-templates-in-angular-2 – yurzui

+0

@yurzuiありがとう:) 。この質問を閉じることができます。 – user3719857

答えて

0

@Component({ 
    selector: 'cstm-dropdown', 
    template: ` 
     <select [ngModel]="selectedOption" (ngModelChange)="onModelChange($event)" > 
     <option *ngFor="let option of options" [ngValue]="option"> 
     <ng-content select=".custom-template"> </ng-content> 
      <!-- The template should be rendered here --> 
     </option> 
     </select> 
    ` 
}) 

の下にあなたのコンテンツテンプレートは、関連するテンプレート

<cstm-dropdown [model]="incident.sensor" [options]="sensors" [id]="'id'">    
    <div class="custom-template"> 
     <template> 
     {{option.name | localName}} 
     </template> 
    <div> 
</cstm-dropdown> 
で満たされているように、あなたのHTML内のセレクタを使用する必要がありますとしてあなたが Content Projectionを使用することができます
+0

これはドロップダウンに何も描画していないようです。私は空白のオプションを取得します。 – user3719857

+0

テンプレート内のドットを削除してください – Aravind

+0

まだ動作しません。 – user3719857

関連する問題