如果要将子组件的数据共享到父组件，可以使用@Output()和EventEmitter<>。
或者，如果您试图在两个不相关的组件之间共享数据，则可以通过Service使用BehaviorSubject();它也适用于在父组件和子组件之间共享数据。

子到父：使用@Output()和EventEmitter<>共享数据。

parent.component.ts

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

@Component({
 selector: 'app-parent',
 template: `
 Message: {{ message }}
  <app-child (messageEvent)="receiveMessage($event)"></app-child>
  `,
 styleUrls: ['./parent.component.css']
})
export class ParentComponent{
 constructor(){}

 message: string;

 receiveMessage($event){
  this.message = $event
 }
}

子组件.ts

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

@Component({
 selector: 'app-child',
 template: `
  <button (click)="sendMessage()">Send message</button>
  `,
 styleUrls: ['./child.component.css']
})
export class ChildComponent{
 message: string = "Hola, Mundo!";

 @Output() messageEvent = new EventEmitter<string>();

 constructor(){}

 sendMessage(){
  this.messageEvent.emit(this.message);
 }
}

无关组件：通过服务共享数据

data.service.ts

import { Injectable } from '@angular/core';

import { BehaviorSubject } from 'rxjs';

@Injectable()
export class DataService{
 private messageSource = new BehaviorSubject('Original 
 message.');

 currentMessage = this.messageSource.asObservable();

 changeMessage(message: string){
  this.messageSource.next(message)
 }
}

home.component.ts

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

import { DataService } from 
'src/app/shared/services/data.service';

@Component({
 selector: 'app-home',
 template: `
  {{ message }}
  `,
 styleUrls: ['./sibling.component.css']
})
export class HomeComponent implements OnInit{
 message: string;

 constructor(private dataService: DataService){}

 ngOnInit(){
  this.dataService.currentMessage.subscribe(message => 
  this.message = message)
 }
}

about.component.ts

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

import { DataService } from 
'src/app/shared/services/data.service';

@Component({
 selector: 'app-about',
 template: `
  {{ message }}
  <button (click)="newMessage()">New message</button>
  `,
 styleUrls: ['./sibling.component.css']
})
export class AboutComponent implements OnInit{
 message: string;

 constructor(private dataService: DataService){}

 ngOnInit(){
  this.dataService.currentMessage.subscribe(message => 
  this.message = message)
  }

 newMessage(){
  this.dataService.changeMessage('Hello from the About 
  component!')
 }
}

window.open看起来非常糟糕。请使用this.router.navigate(['/heroes']);。
如果我理解正确的话，你有一个项目列表，当你点击其中一个项目时，该项目的详细信息页面应该打开？
最好的做法是允许详细路由有一个属性来设置。Angular Routing & Navigation页面非常完整。它显示你应该使用:id-{ path: 'hero/:id', component: HeroDetailComponent }。当你打开详细页面时，你会得到id变量，然后获取它的数据。