0

saludos amigos y gracias por su tiempo

introducir la descripción de la imagen aquí

en esta imagen tengo el componente principal y las sub rutas, no uso la directiva de componentes para ir hacia ellas sino que uso el router-outleintroducir la descripción de la imagen aquí introducir la descripción de la imagen aquí en esta ultima imagen cada tap es una sub rutas lo que quiero es pasar el string que en este caso es una url hacia un video hacia el componente de la sub ruta. el input y output no me funciona porque no tienen relacion alguna mas que atravez del link.

agradezco su ayuda. llevo muchas horas buscando info sobre como hacerlo y tambien vi algunas preguntas por aqui pero no era lo que buscaba.

pregunta editada desde aqui

<ul class="CapiTnv nav nav-pills server-tab" role="tablist" data-toggle="pills">
                <li title="Desu">
                    <a routerLink="./desu" routerLinkActive="active-link">Desu</a>
                </li>
                <li title="Xtreme F">
                    <a routerLink="./xtreme" routerLinkActive="active-link">Xtreme
                        </a>
                </li>
                </ul>

<li title="Xtreme F">
        <a routerLink="./xtreme" routerLinkActive="active-link">Xtreme
            </a>
    </li>

    <router-outlet></router-outlet>
<!- animeEpisodeList aqui esta el arreglo con la data que quiero cargar-->
    <div *ngFor="let item of animeEpisodeList">
        {{item.episodeVideo}}
    </div>

     getEpisodeAnime(){
       this._animeServices.getAnimeListEpisodePlayer(this.animeEpisode?.idAnime!)
          .subscribe((episodeList:IEpisode[])=>{ localStorage.setItem("episodeAnimeList", JSON.stringify(episodeList)) });

          this.animeEpisodeList = JSON.parse(localStorage.getItem("episodeAnimeList")!); 
       
          //este es el componente que carga la data. el mismo se ejecuta en el ngOnInit.
    }
    *este es mi servicio para esta solicitud*
        getAnimeListEpisodePlayer(id:number): Observable<IEpisode[]>{

      return this._http.get<IEpisode[]>(`${this.URL_API}/home/episode/${id}`);
  
    }

   <li title="Xtreme F">
        <a routerLink="./xtreme" routerLinkActive="active-link">Xtreme
            </a>
    </li>
//aqui es donde muestro la navegacion
    <router-outlet></router-outlet>
//item.episodeVideo tiene el url del video que quiero mostrar
//item.episodeVideo es un arreglo y trae 10 url distintas una cada reproductor.
//lo que quiero es por ejemplo en este for de abajo, tomar esa url y pasarla cada una de las sub rutas.
    <div *ngFor="let item of animeEpisodeList">
        {{item.episodeVideo}}
    </div>
    
    


4
  • Para esos casos funciona comunicarlos a través de un servicio. angular.io/guide/…
    – Lobos
    Commented el 2 jun. 2021 a las 17:20
  • la data ya esta el localstorages.con un servicio para esto pieso que seria complicarlo mas. en la ultima imagen la data ya esta ahi disponible. Commented el 2 jun. 2021 a las 18:07
  • Lo estás viendo mal. Un servicio no es solo para obtener datos. Un servicio es un objeto singleton que se comparte a través de toda la app, permitiendo así que dos componentes, en este caso separados por un router-outlet, puedan comunicarse.
    – Lobos
    Commented el 2 jun. 2021 a las 18:20
  • ok amigo @Lobos. lo intentare como indicas, pero antes otra duda relacionada, tengo 10 taps cada uno es una subruta, mi duda con la forma que me indicas es que cada tap necesita una url del video, osea, la data llega en un array, entonces la duda es, si lo hago con el servicio como podre saber a cual tap pertenece el vide? Commented el 2 jun. 2021 a las 18:35

1 respuesta 1

0

No esta bien claro y explicado, no entiendo bien donde tenes las url, cual es el componente que tiene la data o de donde la tenes y donde queres que te llegue, pero: Lo que te comento lobo es cierto, podes usar un servicio para pasar data. Hay varias formas de pasar data en angular

  1. La ideal, seria usar Redux en angular
  2. Podes pasar con el state del navigate objetos de un lugar a otro sin importar el parentezco
  3. Usar un servicio, el servicio mantiene el estado de sus objetos, al ser singleton no tiene ciclos de vida ni destruye sus valores. Supongamos que en la clase de este servicio declaras una propiedad de tipo observable como un subject boolean, en cualquier parte de la aplicacion te suscribis a la misma y cuando cambie el estado por un evento o metodo en algun lado, los componentes suscritos a este observable recibiran el estado actual/modificado.

Si podes detallar mas en cuanto a codigo y pones bien la info, te puedo dar una mejor respuesta ya con el codigo funcional.

1
  • amigo @Diego gracias por responder. acabo de actualizar mi pregunta. Commented el 2 jun. 2021 a las 23:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.