兄弟组件之间的角度通信

我有两个兄弟组件,其中一个需要将数据发送给另一个。英雄组件和遭遇组件之间应进行通信:

<section id="Dashboard" >
 <app-heroes></app-heroes>

 <app-monsters></app-monsters>

 <app-encounters></app-encounters>
</section>

我有 uploaded the UI to imgur 澄清问题。当有人点击其中一个英雄时,被点击的英雄应该被添加到遭遇组件中的“英雄”中。

我创建了一个共享服务:

import { Injectable } from '@angular/core';
import {Subject} from 'rxjs';
import {Hero} from '../model/hero';

@Injectable({
providedIn: 'root'
})
export class SharedHeroService {
 private hero = new Subject<Hero>();
 public  hero$ = this.hero.asObservable();

 publishHero(heroToPublish: Hero){
  this.hero.next((heroToPublish));
 }  
}

为此,我在“我的英雄”组件中创建了以下方法:

addToEncounter(hero){
this.sharedService.publishHero(hero);
}

并在“我的遭遇”组件中添加了以下内容:

@Input() public heroesAdded = [];
@Input() hero: Hero;
private subscriber: Subscription;

constructor(private sharedHeroService: SharedHeroService) {}

ngOnInit() {
this.subscriber = this.sharedHeroService.hero$.subscribe(hero =>{this.hero = 
hero; this.monstersAdded.push(hero)});
}

“英雄”组件的HTML是:

<ul class="heroes">
<li *ngFor="let hero of heroes">
  <span class="badge" onclick="addToEncounter(hero)">{{hero.name}}</span> 
Hitpoints: {{hero.hitPoints}} Armor: {{hero.armor}}
</li>

但当我点击徽章时,我会得到以下错误:

未捕获引用错误:未定义AddToEncounter 在htmlspanelement.onclick处

我在谷歌上搜索了一下,人们说onclick()不应该被使用,但我真的没有其他选择?