ng-Inhalte wählen Sie variable gebunden

Ich versuche, erstellen Sie ein Formular-generator mit Winkel-2. Ein sehr einfaches Beispiel ist wie folgt:

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

Aber ich möchte auch Unterstützung für benutzerdefinierte Elemente, wie:

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>

In meinen Formular-generator-Komponente habe ich dann so etwas wie:

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

Aber da bin ich hier offensichtlich nicht funktioniert. Ist das ein ng2 Einschränkung? Wenn dem so ist, ich denke, ich könnte hart code sagen 5 optionale content-Elemente und überprüfen Sie, ob Sie angegeben werden müssen und nicht dynamisch wählt, sondern das ist ein hack.

Cheers

InformationsquelleAutor gatapia | 2016-05-14
  1. 9

    Seit der Bindung an eine variable, verwenden Sie bitte das one-way-binding-syntax:

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

    Korrektur

    ng-content ist für statische Projektion nur. Es soll schnell sein "transcluding". Bitte überprüfen Sie dieses Problem für mehr info

    • ja.. versucht, die wählen, wird ignoriert
    • Sorry, es scheint ng-content ist für statische Projektion nur. wählen Sie dieses Thema
    • danke ich habe gerade festgestellt, dass auch. Ändern Sie Ihre Antwort, und ich werde markieren Sie es als richtig.
    • dies ist nicht wirklich eine richtige Antwort, da es keine Lösung gibt
    InformationsquelleAutor Abdulrahman
  2. 25

    Ich weiß, das ist eine alte Frage, aber dies ist einer der ersten Orte, die ich landete bei der Suche nach dieser Funktionalität, so werde ich hinzufügen, wie ich war in der Lage, es zu lösen.

    ngContent ist nur für statische Projektion, so dass Sie nicht verwenden können, es zu tun, keine Bindungen. Wenn Sie brauchen Bindungen in den projizierten Inhalten, die Sie verwenden können, ngTemplateOutlet und ngOutletContext.

    Beispiel:

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

    Innen MyComponent Sie zugreifen können, die Vorlage mit ContentChild:

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

    Dann innerhalb der Komponente Vorlage, die Sie übergeben, ngTemplateOutlet wie diese:

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

    Den ngOutletContext ist optional, aber es ermöglicht Ihnen, das Objekt zu erstellen, dass Sie verbindlich in der Vorlage. Beachten Sie, dass ich erstellt eine Eigenschaft item im Kontext-Objekt. Mit den Namen habe ich auf die Vorlage hier: let-item="item"

    Nun der Verbraucher von my-component übergeben können, die in der Vorlage verwendet werden, die für jedes Element in der Liste.

    Kredit:
    Diese Antwort führte mich in die richtige Richtung.

    • Gibt es einen Weg, die Outlet Vorlage (der mit der let-item) in einer anderen Komponente? - nicht direkt im my-component?
    • Ich bin mir nicht sicher, ob ich verstehe, was Sie nach. Sprechen Sie über die html-template-code oder der controller-code? Sobald Sie einen Griff auf der Vorlage, können Sie übergeben es herum wie jede andere variable, so dass Sie nur benötigen, ist es irgendwie. Zum Beispiel, in meinem Anwendungsfall, hatte ich eigentlich das passieren der Vorlage unten eine andere Ebene, um das Kind meiner Komponente, so dass ich nur ging es als input-parameter an das Kind-Komponente und dann hatte ich die Vorlage dort verwenden.
    • Wenn Sie nicht möchten, dass Ihre Artikel Vorlage innerhalb der <mein-Komponenten - > - tag, Sie könnte möglicherweise verwenden Sie einen ViewChild, um es von irgendwo anders, aber habe ich noch nicht getestet.
    • Ich habe versucht, mit ViewChild - aber es hat nicht funktioniert, so dass ich eine Frage gestellt stackoverflow.com/q/42688946/4610489
    • Was ist, wenn ich mehrere Vorlagen im <mein-Komponenten - > ich weiß, wir können @ContentChildren(TemplateRef) Vorlagen: QueryList<TemplateRef> Aber wie aktualisiere ich diese Teile für mehrere templates <template [ngTemplateOutlet]="templateVariable" [ngOutletContext]="{item: item}"></template>, kannst du bitte ne Anleitung?
    • Ich bin mir nicht sicher, was du meinst. Wenn Sie mehrere Vorlagen benötigen aber nur die Anzeige einer von Ihnen auf der Grundlage einer Bedingung, dann könnte man einfach suchen Sie die Vorlagen-Liste und speichern Sie die richtige Vorlage in der templateVariable. Wenn Sie wirklich wollen, um alle die Vorlagen, dann könnte man vielleicht ein *ngFor auf den <template> tag, um eine Schleife durch alle Vorlagen und zeigen Sie alle. Ich bin mir nicht wirklich sicher, was Sie versuchen zu tun, aber ich hoffe, das hilft. Wenn nicht, möchten Sie vielleicht, um eine neue Frage stellen.
    • also das ist so, wie <ng-content> nur mit übergabe von Variablen von Kind zu Elternteil. Ich Liebe es. Mein Verständnis ist, dass man mehrere Vorlagen wie <template let-item1="..">, <template let-item2="..."> etc.

    InformationsquelleAutor Justin
  3. 10

    Können Sie tun dies bereits, wenn Sie wickeln Sie den Inhalt mit einem <template> element.

    //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');
  }
}

    Plunker Beispiel

    • Ich versuche, wirklich bin, aber ich kann nicht Köpfe oder Schwänze diese. Sieht aus wie Sie eine Vorlage erstellen (könnte leer sein, vermute ich mal) und übergeben es an test-compoenent. Was ist das test-Komponente, ist es angeblich das "dynamische element" leite ich in meinen Formular-generator? Bedeutet das, dass für jedes element kann ich wollen, um zu injizieren, in meinen Formular-generator ich brauche, um ihm eine [prop] - Eingang?
    • TestComponent ist nur einige Komponenten, die ich verwenden in der Vorlage, dass die an SomeComponent (könnte alles sein). Ich habe gerade es, zu zeigen, wie der Inhalt in der verabschiedeten Vorlage zu binden, um die Eigenschaften in SomeComponent. Hoffe, das hilft. Wenn Sie weitere Fragen haben, werde ich nicht Antworten, heute nicht mehr. Hier ist es Zeit für das Bett. Die prop Zeug ist auch nur einige Beispiel, wie zu binden, die aus der Vorlage (wie vor) brauchen Sie nicht, um es für den einfachsten Fall.
    • Ist das noch der richtige Weg, es zu tun mit Eckigen 2.4.1?
    • Sieht aus wie es sollte trotzdem so funktionieren. Richtlinien` verschoben wurde, tto @NgModule({ declarations: [...]. <template [ngTemplateOutlet]="..." funktionieren statt TemplateWrapper
    • Die plunker ist gebrochen zumindest. Konnte Sie es zu aktualisieren, bitte?
    • Plunker funktioniert nicht für mich da eine Weile. Könnte ich ein suchen, wenn Plunker für mich funktioniert wieder.

    InformationsquelleAutor Günter Zöchbauer
Schreibe einen Kommentar