ダイナミックテンプレートを使用してコンポーネントを作成する方法は？ （コンポーネントはインラインテンプレートで転写されます）

Question

テンプレートのローカル変数にアクセスできる動的なテンプレート文字列を持つコンポーネントを作成しようとしています。私が試したすべてのアプローチは、 "動的テンプレート文字列" $compile '（角度1の用語ではありません。

以下は、下のコンポーネントのコードです。コメントが表示されたらitemを参照できるテンプレート文字列をngForに挿入したいと思います。

@Component({ 
    selector: 'ion-alpha-scroll', 
    template: ` 
    <ion-scroll [ngStyle]="calculateScrollHeight()" scrollX="false" scrollY="true"> 
     <ion-list class="ion-alpha-list-outer"> 
     <div *ngFor="let items of sortedItems | mapToIterable;"> 
      <ion-item-divider id="scroll-letter-{{items.key}}">{{items.key}}</ion-item-divider> 
      <ion-item *ngFor="let item of items.value"> 
      <!-- how can I pass a dynamic template here that can reference item ? --> 
      </ion-item> 
     </div> 
     </ion-list> 
    </ion-scroll> 
    <ul class="ion-alpha-sidebar" [ngStyle]="calculateDimensionsForSidebar()"> 
     <li (click)="alphaScrollGoToList(letter)" *ngFor="let letter of alphabet"> 
     <div class="letter">{{letter}}</div> 
     </li> 
    </ul> 
    `, 
    pipes: [MapToIterable] 
}) 
export class IonAlphaScroll { 
    @Input() listData: any; 
    @Input() key: string; 
    @Input() template: string; 
    .... 
} 

理想的には私はngForでitemion-alpha-scroll参照のトランスクルードコンテンツを持っていると思います。私は、コンポーネントの必要ngForでng-contentを使用してみましたし、運がなかった - 私はこのようなものだった試みた

<ion-alpha-scroll *ngIf="breeds" [listData]="breeds" key="$t"> 
    {{item.$t}} 
</ion-alpha-scroll> 

一つのこと -

<ion-alpha-scroll *ngIf="breeds" [listData]="breeds" key="$t" [template]="alphaScrollTemplate"> 
</ion-alpha-scroll> 

alphaScrollTemplateが{{item.$t}}を含む単なる文字列です。私は、コメントが質問をしているコンポーネントでそれを参照しようとしましたが、それは動作しません -

... 
<ion-item *ngFor="let item of items.value"> 
    {{template}} 
    <!-- this just outputs {{item.$t}} literally --> 
</ion-item> 
... 

これはまださえ可能な角度2である場合、私は本当に興味があります。私はちょうどthis question which is very similar to mineを見つけました。どんな助けや提案も大変ありがとうございます。ここ

Answer 1

私はこの解決策は、動的コンポーネント及びViewContainerRefとComponentFactoryを使用して負荷を生成する角度2.0.0-rc.3

ために使用される溶液です。 Here is the ionic 2 component on GitHub。

export function createComponentFactory(resolver: ComponentResolver, metadata: ComponentMetadata): Promise<ComponentFactory<any>> { 
    const cmpClass = class DynamicComponent {}; 
    const decoratedCmp = Component(metadata)(cmpClass); 
    return resolver.resolveComponent(decoratedCmp); 
} 

@Directive({ 
    selector: 'dynamic-html-outlet', 
}) 
export class DynamicHTMLOutlet { 
    @Input() src: string; 
    @Input() ionAlphaScrollRef: any; 
    @Input() currentPageClass: any; 

    constructor(private vcRef: ViewContainerRef, private resolver: ComponentResolver) { 
    } 

    ngOnChanges() { 
    if (!this.src) return; 

    const metadata = new ComponentMetadata({ 
     selector: 'dynamic-html', 
     template: this.src, 
     pipes: [MapToIterable] 
    }); 
    createComponentFactory(this.resolver, metadata).then(factory => { 
     const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector); 
     let component = this.vcRef.createComponent(factory, 0, injector, []); 
     component.instance.ionAlphaScrollRef = this.ionAlphaScrollRef; 
     component.instance.currentPageClass = this.currentPageClass; 
    }); 
    } 
} 

@Component({ 
    selector: 'ion-alpha-scroll', 
    template: ` 
    <dynamic-html-outlet 
     [src]="alphaScrollTemplate" 
     [ionAlphaScrollRef]="ionAlphaScrollRef" 
     [currentPageClass]="currentPageClass"> 
    </dynamic-html-outlet> 
    `, 
    pipes: [MapToIterable], 
    directives: [DynamicHTMLOutlet] 
}) 
export class IonAlphaScroll { 
    @Input() listData: any; 
    @Input() key: string; 
    @Input() itemTemplate: string; 
    @Input() currentPageClass: any; 
    @Input() triggerChange: any; 
    private _scrollEle: HTMLElement; 
    sortedItems: any = {}; 
    alphabet: any = []; 
    alphaScrollTemplate: string; 
    ionAlphaScrollRef = this; 

    constructor(
    @Host() private _content: Content, 
    private _elementRef: ElementRef, 
    private vcRef: ViewContainerRef, 
    private resolver: ComponentResolver 
) { 

    } 

    ngOnInit() { 
    this.alphaScrollTemplate = ` 
     <style> 
     .ion-alpha-sidebar { 
      position: fixed; 
      right: 0; 
      display: flex; 
      flex-flow: column; 
      z-index: 50000; 
     } 

     .ion-alpha-sidebar li { 
      flex: 1 1 auto; 
      list-style: none; 
      width: 15px; 
      text-align: center; 
     } 
     </style> 

     <ion-scroll class="ion-alpha-scroll" [ngStyle]="ionAlphaScrollRef.calculateScrollDimensions()" scrollX="false" scrollY="true"> 
     <ion-list class="ion-alpha-list-outer"> 
      <div *ngFor="let items of ionAlphaScrollRef.sortedItems | mapToIterable; trackBy:ionAlphaScrollRef.trackBySortedItems"> 
      <ion-item-divider id="scroll-letter-{{items.key}}">{{items.key}}</ion-item-divider> 
      <ion-item *ngFor="let item of items.value"> 
       ${this.itemTemplate} 
      </ion-item> 
      </div> 
     </ion-list> 
     </ion-scroll> 
     <ul class="ion-alpha-sidebar" [ngStyle]="ionAlphaScrollRef.calculateDimensionsForSidebar()"> 
     <li *ngFor="let letter of ionAlphaScrollRef.alphabet" tappable (click)="ionAlphaScrollRef.alphaScrollGoToList(letter)"> 
      <a>{{letter}}</a> 
     </li> 
     </ul> 
    `; 

    setTimeout(() => { 
     this._scrollEle = this._elementRef.nativeElement.querySelector('scroll-content'); 
     this.setupHammerHandlers(); 
    }); 
    } 

    ngOnChanges(changes: {[propertyName: string]: SimpleChange}) { 
    let tmp = {}; 
    for (let i = 0; i < this.listData.length; i++) { 
     let letter = this.listData[i][this.key].toUpperCase().charAt(0); 
     if (typeof tmp[letter] === 'undefined') { 
     tmp[letter] = []; 
     } 
     tmp[letter].push(this.listData[i]); 
    } 

    this.alphabet = this.iterateAlphabet(tmp); 
    this.sortedItems = tmp; 
    } 

    // .... 
}