He creado el componente primario y secundario y estoy tratando de pasar datos de primario a secundario y navegar a la página secundaria. pero los datos no se pasan cuando navego a la página secundaria. Los datos se pasan cuando visualizo el componente secundario en la misma página. A continuación he agregado el código. Funciona si elimino la línea this.router.navigate(['/single-track']);. Pero quiero que debería navegar a otra página y mostrarse allí.

Parent.html

    <div class="row">
        <div class="col-md-10">
            <div class="card" *ngFor="let track of trackList">
                <div class="name">{{track.productName}}</div>
                <div class="tracklink">
                    <audio controls>
                        <source src="{{track.imageUrl}}" type="audio/mpeg">
                    </audio>
                </div>
                <div><span (click)="TrackPage(track)"><i class="fa fa-arrow-right"></i></span></div>
            </div>
        </div>
    </div>
</div>
<app-main-track-page [currentTrack] = "currentTrack" *ngIf="value"></app-main-track-page>

Parent.ts

import { GetTrackService } from '../get-track.service';
import { track } from '../track';
import { Router } from '@angular/router'

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})

export class HomeComponent implements OnInit {
  trackList: track[];
  currentTrack:track;
  value:boolean = false;

  constructor(private getdata: GetTrackService, private router:Router) { }

  ngOnInit() {
    this.getdata.getTrack().subscribe(
      data => this.trackList = data
    );
  }

  TrackPage(track:track):void{
    this.currentTrack = track;
    console.log("Home track: ", this.currentTrack)
    this.value = true;
    this.router.navigate(['/child']);
  }
}

Child.html


<div class="container" style="margin-top: 50px;">
    <div class="row">
        <div class="col-md-10">
            <div class="card">
                <div class="name">{{currentTrack.productName}}</div>
                <div class="tracklink">
                    <audio controls>
                        <source src="{{currentTrack.imageUrl}}" type="audio/mpeg">
                    </audio>
                </div>
            </div>
        </div>
    </div>
</div>

Child.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-main-track-page',
  templateUrl: './main-track-page.component.html',
  styleUrls: ['./main-track-page.component.css']
})
export class MainTrackPageComponent implements OnInit {

  @Input() currentTrack:track;
  trackList: track[];
  constructor() { }

  ngOnInit() {
    console.log("currentTrack: ",  this.currentTrack)

  }

}

0
Hitha 10 feb. 2020 a las 13:08

2 respuestas

La mejor respuesta

Puede crear un servicio común para compartir datos e incluirlo en los proveedores de su módulo. Después de establecer los datos en el componente principal y puede obtener datos después de cambiar la ruta en su componente secundario.

0
Ramil Aliyev 10 feb. 2020 a las 10:13

Cuando estás navegando, los componentes se destruyen. Entonces, para mantener los datos pasados, almacenados. Cree un servicio y guárdelo allí. Después de navegar, recuperarlo del servicio

0
Saichaitanya 10 feb. 2020 a las 10:54