Winkel: Pass-Komponente auf eine Komponente

Habe ich dieses kleine gridComponent:

@Component({
    selector: 'moving-grid',
    templateUrl: './grid.component.html',
    styleUrls: ['./grid.component.css']
})
  export class GridComponent {
     @Input('widgets') extComponents: Array<Component>;
  }

Und eine zweite testComponent

@Component({
  selector: 'test',
  template: `
    <div #content>I say hello<li>i</li><li>u</li><button (click)="test()">click me</button> world</div>
  `
})

export class TestComponent {
  @ViewChild('content') content: HTMLElement;

  getContent() {
    return this.content;
  }
  test() {
    console.log("test");
  }
}

Versuche jetzt, übergeben Sie mehrere Instanzen von testComponent der gridComponent. Deshalb habe ich eine Dritte Komponente, die aussieht wie diese:

template: `
        <moving-grid [widgets]="[z1,z2]"> 
          <test  class="grid-item-content-001" #z1></test>
          <test  class="grid-item-content-002" #z2></test>
        </moving-grid>
      `

Bis zu diesem Punkt funktioniert alles wie erwartet. Aber wie kann ich das Rendern der Komponenten von @Input in die gridComponent?
Mein Erster Ansatz war es zu erklären, @ViewChild in der testComponent und senden Sie es mit einem getContent()-Funktion. Aber es wird nicht funktionieren. Kann ich mit der ng-content-Richtlinie, die in irgendeiner Weise oder gibt es eine bessere Lösung?

Den GridComponent sieht wie folgt aus. Ich möchte die Anzeige der Vorlagen von @Input-Komponente in eines der schwarzen Felder. Ist es möglich?

Winkel: Pass-Komponente auf eine Komponente

Vielen Dank für jede Art von Hilfe

InformationsquelleAutor Draftsman | 2017-05-12
  1. 8

    Sollten Sie nicht verwenden eine @Input pass in die Komponenten. Sie können @ContentChildren und eine abstrakte WidgetComponent:

    @Component({
    selector: 'moving-grid',
    template: `
      <div class="widget-wrapper">
         <ng-container *ngFor="let widget of widgets">
             <!-- use a ngSwitchCase here for different types-->
             <grid-test-widget [widget]="widget" *ngIf="widget.active && widget.type === 'test'"></grid-widget>
         </ng-container>          
      </div>
    `,
    styleUrls: ['./grid.component.css']
})
export class GridComponent implements AfterContentInit {
     @ContentChildren('widget') widgets: WidgetComponent[];

     ngAfterContentInit() {
        //your components will be available here
     }
}

    Die Vorlage Ihres Dritten Komponente wird die gleiche bleiben, aber ohne die [widgets] und einen zusätzlichen #widget name:

    <moving-grid> 
  <test-widget class="grid-item-content-001" #widget [active]="false"></test>
  <test-widget class="grid-item-content-002" #widget></test>
</moving-grid>

    Ihre TestWidgetComponent die Erweiterung einer abstrakten WidgetComponent :

    @Directive({
  selector: 'test-widget'
})
export class TestWidgetComponent extends WidgetComponent {
    public type: string = 'test';
}

    Und Ihre WidgetComponent:

    @Injectable()
export class WidgetComponent {

   @Input()
   public active: boolean;

   public type: string;

}

    Und Sie haben einige grid-widgets basierend auf dem Typ des widgets:

    @Component({
  selector: 'grid-test-widget',
  template: `<div #content>I say hello<li>i</li><li>u</li><button (click)="test()">click me</button> world</div>`
})
export class GridTestWidgetComponent{}
    • Danke für die Antwort. Aber kann ich die Komponenten, um die Vorlage von code? Ich habe zum speichern der Komponenten und zeigt diese auf irgendeine Art von Ereignis. Auch wäre es viel besser, wenn die gridComponent nicht wissen, etwas über die testComponent (kein import tag)
    • Das problem mit der dynamischen hinzufügen von Sachen, ist, dass es irgendwie verhindert, dass Sie mit AoT, und es ist auch nicht als der kantige Art und Weise. Vielleicht sollten Sie versuchen, einen anderen Weg finden, das zu erreichen, was Sie wollen. Ich werde aktualisieren, meine Antwort ein wenig, um zu zeigen, wie können Sie dynamisch aktivieren und deaktivieren eines widgets. Aber ich bin mir nicht ganz sicher, was Sie erreichen wollen
    • Wie Sie sehen können, in meinem Bild oben, ich benutze eine Art widgetstore (lila Kästchen). Nach einem Klick auf Sie, eine black-box wird Hinzugefügt, um den Leerraum unten. Die angeklickte widget benötigt Informationen über die Komponente gerendert wird in einer schwarzen box. So brauche ich zum speichern der Inhalte. Etwas verwirrend, ich weiß. Aber danke für deine Hilfe
    • Ich aktualisiert meine Antwort. Hoffnung macht es Sinn ein bisschen. Aber Nein, es ist nicht wirklich möglich, das zu tun, was Sie wollen: 'speichern des Inhalts'. Verlieren Sie den Winkel-Bindungen, wenn Sie [innerHtml] zum Beispiel. Ich hoffe, meine Antwort gibt Ihnen Ideen zu tun, es auf andere Weise zu
    • Danke für die Mühe. Denke, ich kann nicht einmal eine bessere Lösung für dieses problem.
    • Ich stieß auf dieses post, weil ich versuche, so etwas zu tun: Platzieren Sie eine Komponente (oder Komponenten-html) in die MatDialog im content-Bereich (Winkel-material-dialog). @PierreDuc In der Theorie, kann diese Vorgehensweise angewendet werden, die gleiche Weise?
    • eine andere Möglichkeit könnte vielleicht sein, verwenden Sie # und die componentElement: <widget-container [Komponente]="myComponent"> <mein-Komponente #myComponent> Gedanken (würde wahrscheinlich ein display: none dort irgendwo)?

    InformationsquelleAutor PierreDuc
Schreibe einen Kommentar