Как передать данные из родительского компонента в дочерний компонент и перейти на дочернюю страницу в Angular?

Question

Я создал родительский и дочерний компоненты и пытаюсь передать данные от родительского к дочернему и перейти на дочернюю страницу. но данные не передаются при переходе на дочернюю страницу. Данные передаются, когда я отображаю дочерний компонент на той же странице. Ниже я добавил код. Это работает, если я удаляю this.router.navigate(['/single-track']); строку. Но я хочу, чтобы он перешел на другую страницу и отобразил там.

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)

  }

}

Answer 1

При навигации компоненты уничтожаются. Таким образом, чтобы сохранить переданные данные, сохраняются. Создайте сервис и храните его там. После навигации извлеките его из сервиса

Answer 2

Вы можете создать общую службу обмена данными и включить в нее поставщиков вашего модуля. После того, как вы установили данные в родительском компоненте, и вы можете получить данные после изменения маршрутизации в своем дочернем компоненте.