Bonjour à tous et merci de l'attention que vous portez à mon problème,

Je souhaite créer un système de disposition automatique de vidéo selon des informations qui viendraient d'un serveur externe.

Pour simuler le serveur externe, j'ai créé deux services :

disposition.service.ts : génère les vidéos

import { Subject } from "rxjs/Subject";
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class DispositionClassic {
  dspSubject = new Subject<any[]>();

  private dispositions = [
    {
      name: "disposition en haut à gauche",
      color: "green",
      width: "600",
      height:"960",
    },
    {
      name: "disposition en haut à droite",
      color: "purple",
      width: "500",
      height:"400",
    },

    {
      name: "disposition en haut à gauche",
      color: "red",
      width: "600",
      height:"960",
     
    },
    {
      name: "disposition en haut à droite",
      color: "black",
      width: "500",
      height:"400",
     
    },


   
  ];

  emitDispositionSubject() {
    this.dspSubject.next(this.dispositions.slice());
  }
}

layout.service.ts :génère les layout contenant les vidéo et leur positionnement

import { Subject } from "rxjs/Subject";
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class LayoutClassic {
  laytSubject = new Subject<any[]>();

  private layouts = [
    {
      name: "layout en haut à gauche",
      color: "blue",
      width: "960",
      height:"600",
    },

    {
      name: "layout en haut à droite",
      color: "yellow",
      width: "960",
      height:"600",
    },

    {
      name: "layout en bas à gauche",
      color: "yellow",
      width: "960",
      height:"600",
    },

    {
      name: "layout en bas à droite",
      color: "blue",
      width: "960",
      height:"600",
    },

  ];

  emitLayoutSubject() {
    this.laytSubject.next(this.layouts.slice());
  }
}

J'ai créé également deux composants (layout et disposition) qui ont chacun un composant enfant : layout-mechanism et disposition-mechanism.

j'appelle depuis ma page principale le composant layout qui appelle le composant layout-mechanism qui génère les layouts (fonctionne très bien). Puis dans mon composant layout-mechanism, j'appelle mon composant disposition qui appelle mon composant disposition mechanism.

Et c'est là que ça coince : mes dispositions sont toutes crées dans chaque layout :

Je cherche donc un moyen pour que chaque layout créé appelle une seule disposition (chacune à la suite) pour que mes 4 dispositions appraissent chacunes dans une layout.

une fois encore, merci de votre attention.

-
Edité par Pierre Baron 2 septembre 2020 à 10:22:58