Soy nuevo en angular6, no considere esta pregunta como duplicada, ya que no pude encontrar una respuesta relevante hasta el momento, tengo 2 componentes Componente incidente y componente de detalle de incidente, (el componente de detalle del incidente está dentro del componente del incidente) He obtenido datos de la API en incidente.component.ts ahora tengo un botón llamadover detalle in incidente.componente.html cuando se hace clic en el botón de ver detalles, navegará a componente de detalle de incidente utilizando router.navigate, ahora junto con esto quiero enviar datos que están en incidente component.ts a incidente-detail component.ts para que pueda vincular datos en incidente-detail.component.html, ¿Hay alguna manera de lograr esto? Gracia

estructura de carpeta

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

incidente.componente.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>

incidente.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']);

}

}

incidente-detail.component.html necesita obtener datos del componente 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>

incidente-detail.component.ts quiere obtener this.detailData del componente incidente aquí

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() {

  }
}