2017-01-04 10 views
1

Я написал угловую структурную директиву, которая похожа на ng-init от углового 1. По сути, она позволяет накладывать сложное выражение на текущий контекст на одну переменную в дочернем контексте.У Angular2 есть встроенная концепция ngInit от Angular1?

У Angular2 есть встроенный способ сделать это, я пропустил?

Я не ищу объяснения, как переместить логику в мой компонент, но как сохранить выражение в html без копирования/вставки при каждом использовании.

Без ngInit:

<div> 
    <span>{{ getSlot(locationX, locationY).name }}</span> 
    <span>{{ getSlot(locationX, locationY).product }}</span> 
</div> 

С ngInit:

<div *ngInit="let slot be getSlot(locationX, locationY)"> 
    <span>{{ slot.name }}</span> 
    <span>{{ slot.product }}</span> 
</div> 

Пользовательские структурные директивы:

import { Directive, Input, ViewContainerRef, TemplateRef } from '@angular/core'; 
@Directive({ 
    selector: '[ngInit]' 
}) 
export class ngInit { 
    constructor(private _viewContainer: ViewContainerRef, private _templateRef: TemplateRef<any>) { } 

    @Input() set ngInitBe(value: any) { 
     this._viewContainer.clear(); 
     this._viewContainer.createEmbeddedView(this._templateRef, { $implicit: value }); 
    } 
} 
+0

Откуда возникает 'getSlot'? – Makoto

+0

Извините, я не включил остальную часть моего кода, которая казалась менее актуальной. getSlot - это функция на моем компоненте. locationX & locationY - $ неявные переменные из 2 внешних * ngFor. –

ответ

0

Ближайший вещь, которую я нашел до сих пор является, но это, вероятно, а не цель, потому что это немного запутанно.

  <template #test> 
       <span>{{slot.locationX}}</span> 
       <span>{{product.name}}</span> 
      </template> 

      <template [ngOutletContext]="{ slot: getSlot(locationX, locationY), product: { name: 'a' } }" [ngTemplateOutlet]="test"> 
      </template>