ng-content выберите связанную переменную

Question

Я пытаюсь создать конструктор форм с помощью Angular 2. Очень простой пример выглядит следующим образом:

this.fields = [{name: 'Name', type: 'text'}, {name: 'Age', type: 'number'}];

Но я также хочу поддерживать пользовательские элементы, такие как:

this.fields = [
  {name: 'Name', type: text}, 
  {name: 'Age', type: 'custom', customid: 'Ctl1'},
  {name: 'Whatever', type: 'custom', customid: 'Ctl2'}
];
// template:
<super-form [fields]="fields">
  <Ctl1><input type="number" ...><Ctl1>
  <Ctl2><whaterver-control ...><Ctl2>
</super-form>

В моем компоненте конструктора форм у меня есть что-то вроде:

<div *ngFor="let f of fields">
  <div [ngSwitch]="f.type">
    <span *ngSwitchWhen="'custom'">          
      <ng-content select="f.customid"></ng-content>
    </span>
  </div>
</div>

Но, учитывая, что я здесь, это, очевидно, не работает. Это ограничение ng2? Если это так, я думаю, я мог бы жестко написать, скажем, 5 необязательных элементов содержимого и проверить, указаны ли они и не имеют динамического выбора, но это хак.

ура

Answer 1

Поскольку вы связываетесь с переменной, используйте синтаксис одностороннего связывания, например:

<ng-content [select]="f.customid"></ng-content>

коррекция
ng-content только для статической проекции. Это должно быть быстро "зацикливание". Пожалуйста, проверьте эту проблему для получения дополнительной информации

Answer 2

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

ngContent предназначен только для статической проекции, поэтому его нельзя использовать для каких-либо привязок. Если вам нужны привязки в вашем проецируемом контенте, вы можете использовать ngTemplateOutlet и ngOutletContext.

Пример использования:

<my-component>
    <template let-item="item">
        <h1>{{item?.label}}</h1> - <span>{{item?.id}}</span>
    </template>
</my-component>

Внутри MyComponent вы можете получить доступ к этому шаблону с помощью ContentChild:

@ContentChild(TemplateRef) templateVariable: TemplateRef<any>;

Затем внутри шаблона вашего компонента вы передаете его в ngTemplateOutlet следующим образом:

<div *ngFor="let item of list">
    <template [ngTemplateOutlet]="templateVariable" [ngOutletContext]="{item: item}"></template>
</div>

NgOutletContext является необязательным, но он позволяет вам создать объект, к которому вы будете привязывать шаблон. Обратите внимание, что я создал свойство item в объекте контекста. Это соответствует имени, которое я положил на шаблон здесь: let-item="item"

Теперь потребитель my-component может передать шаблон, который будет использоваться для каждого элемента в списке.

Кредит: Этот ответ привел меня в правильном направлении.

Answer 3

Вы можете сделать это уже, если вы оберните содержимое <template> элемент.

// renders the template
// `item` is just an example how to bind properties of the host component to the content passed as  template
@Directive({
  selector: '[templateWrapper]'
})
export class TemplateWrapper implements OnChanges {

  private embeddedViewRef:EmbeddedViewRef<any>;

  @Input()
  private item:any;

  constructor(private viewContainer:ViewContainerRef) {
    console.log('TemplateWrapper');
  }

  @Input() templateWrapper:TemplateRef<any>;

  ngOnChanges(changes:{[key:string]:SimpleChange}) {
    if (changes['templateWrapper']) {
      if (this.embeddedViewRef) {
        this.embeddedViewRef.destroy();
      }
      console.log('changes', changes);
      this.embeddedViewRef = this.viewContainer.createEmbeddedView(this.templateWrapper, {item: this.item});
    }

    if (this.embeddedViewRef) {
      console.log('context', this.embeddedViewRef.context);
      this.embeddedViewRef.context.item = this.item;
    }
  }
}

// just some component that is used in the passed template
@Component({
  selector: 'test-component',
  styles: [':host { display: block; border: solid 2px red;}'],
  directives: [TemplateWrapper],
  template: `
<div>test-comp</div>
<div>prop: {{prop | json}}</div>
  `
})
export class TestComponent {
  @Input() prop;

  constructor() {
    console.log('TestComponent');
  }
}

// the component the `<template>` is passed to to render it
@Component({
  selector: 'some-comp',
  directives: [TemplateWrapper],
  template: `
<div>some-comp</div>
<div *ngFor="let f of fields">
  <div [ngSwitch]="f.type">
    <span *ngSwitchCase="'custom'">         
      <template [templateWrapper]="template" [item]="f" ></template>
    </span>
  </div>
</div>  
  `
})
export class SomeComponent {

  constructor() {
    console.log('SomeComponent');
  }

  @ContentChild(TemplateRef) template;

  fields = [
    {name: 'a', type: 'custom'},
    {name: 'b', type: 'other'},
    {name: 'c', type: 'custom'}];
}

// the component where the `<template>` is passed to another component
@Component({
  selector: 'my-app',
  directives: [SomeComponent, TestComponent],
  template: `
<some-comp>
  <template let-item="item">
    <div>some content</div>
    <div>item: {{item | json}}</div>
    <test-component [prop]="item"></test-component>
  </template>
</some-comp>
  `,
})
export class App {
  constructor() {
    console.log('AppComponent');
  }
}

Пример плунжера