Передать данные в включенный повторяющийся элемент из повторяющегося компонента

В Angular 2 я хочу поместить строку ng-content в ngFor внутри моего компонента. Но проблема в том, что мне нужно передать некоторые данные в включенный элемент.

Я нашел следующее решение для AgularJS:
http://plnkr.co/edit/aZKFqPJmPlfTVRffB0Cc?p=preview

.directive("foo", function($compile){
  return {
    scope: {},
    transclude: true,
    link: function(scope, element, attrs, ctrls, transclude){

      scope.items = [1, 2, 3, 4];

      var template = '<h1>I am foo</h1>\
                      <div ng-repeat="$item in items">\
                        <placeholder></placeholder>\
                      </div>';
      var templateEl = angular.element(template);

      transclude(scope, function(clonedContent){
        templateEl.find("placeholder").replaceWith(clonedContent);

        $compile(templateEl)(scope, function(clonedTemplate){
          element.append(clonedTemplate);
        });
      });
    }
  };
});

Как я могу сделать то же самое в Angular 2?

PS: Тот же вопрос на русском.


angular angularjs transclusion
person Qwertiy    schedule 19.07.2016    source источник
comment
не могли бы вы уточнить немного больше? что вы хотите в angular2?   -  person Pardeep Jain    schedule 19.07.2016

Ответы (1)


arrow_upward
3
arrow_downward

Вы можете использовать ngForTemplate следующим образом:

@Component({
    selector: 'foo',
    template: `
        <h1>I am foo</h1>
        <div>
         <template ngFor [ngForOf]="data" [ngForTemplate]="itemTemplate"></template>
        </div>`
})
export class Foo {
    @Input() data: any[];
    @ContentChild(TemplateRef) itemTemplate: TemplateRef<any>;
}

@Component({
  selector: 'my-app',
  template: `<h1>Angular 2 Systemjs start</h1>
    <foo [data]="items">
        <template let-item>
            <div>item: {{item}}</div>
        </template>
    </foo>
 `,
  directives: [Foo],

})
export class AppComponent {
    items = [1, 2, 3, 4];
}

Пример планкера

Или вместо template let-item можно написать:

<foo [data]="items">
   <div template="let item">item: {{item}}</div>
</foo>

Пример планкера

person yurzui    schedule 19.07.2016
comment
Большой! Проверил еще некоторые детали - работает даже лучше, чем я хотел! - person Qwertiy; 19.07.2016
comment
Что делать, если мне нужен дополнительный элемент упаковки для повторяющегося элемента? - person Qwertiy; 03.10.2016