Sou novo no angular6, por favor, não considere esta pergunta como duplicada, pois não consegui encontrar respostas relevantes até agora, tenho 2 componentesincident Component e componente de detalhes do incidente, (o componente de detalhes do incidente está dentro do componente do incidente) Busquei dados da API em incident.component.ts agora eu tenho um botão chamadover detalhe em incident.component.html ao clicar no botão de visualização de detalhes, ele navegará para componente de detalhes do incidente usando router.navigate, agora, junto com isso, desejo enviar dados que estão no componente de incidente.ts para o componente de detalhe do incidente.ts para que eu possa vincular os dados em incident-detail.component.html. Existe uma maneira de conseguir isso? Obrigad

strutura @pasta

incident
  incident-detail.component.html
   incident-detail.component.ts
 incident.component.html
  incident.component.ts

incident.component.html

<div class="card" *ngFor="let incident of incidents; let i = index"> 
<div class="card-header">
<span class="badge">A</span><small>{{incident.Title}}
<span class="badge">A</span><small>{{incident.Ticket}} 
</small>
<div class="card-footer">
<button class="btn btn-sm btn-link" 
(click)="onLoadActive(incident)">View in Detail</button>
</div>
</div>
</div>

incident.component.ts

  import { Component, OnInit } from '@angular/core';
  import { Router } from '@angular/router';
  import { Incidents } from '../../shared/models/incidents.model';
  import { DataStorageService } from '../../shared/services/data- 
  storage.service';

  @Component({
  selector: 'app-active-incident',
  templateUrl: './active-incident.component.html',
  styleUrls: ['./active-incident.component.css']
  })
  export class ActiveIncidentComponent implements OnInit {

  detailData: any;

  private _incidents: Incidents[] = [];
  public get incidents(): Incidents[] {
  return this._incidents;
  }
  public set incidents(value: Incidents[]) {
  this._incidents = value;
  }

  constructor(private router: Router, private dataStorageService: 
  DataStorageService) { }

 ngOnInit() {
  this.dataStorageService.getIncidents()
  .subscribe(
    (data: Incidents[]) => {
      for (let i = 0; i < data.Events.length; i++) {
        const quoteReplaceData = data.Events[i].replace(/'/g, '"');
        const objIdRemove = quoteReplaceData.replace(quoteReplaceData.substr(quoteReplaceData.indexOf('\"_id\": ObjectId'), 44), '');
        this.incidents.push(JSON.parse(objIdRemove)); // JSON.parse(data),
       console.log(this.incidents);
      }
    },
    (err: any) => console.log(err),
    () => console.log('All done getting incidents')
  );
}

onLoadActive(incident) {
  // some logic
  this.detailData = incident;
  this.router.navigate(['/active-detail']);

}

}

incident-detail.component.html precisa obter dados do componente de incidente

 <div class="card"> 
<div class="card-header">
<span class="badge">A</span><small>{{incident.Title}}
<span class="badge">A</span><small>{{incident.Ticket}} 
</small>
</div>
</div>

incident-detail.component.ts deseja obter this.detailData do componente de incidente aqui

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

@Component({
  selector: 'app-active-incident-detail',
  templateUrl: './active-incident-detail.component.html',
  styleUrls: ['./active-incident-detail.component.css']
})
export class ActiveIncidentDetailComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  }
}