Связь между родственными компонентами в угловых

Question

У меня есть два родственных компонента, и один должен отправить данные другому.Связь должна происходить между компонентом героев и компонентом встреч:

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

 <app-monsters></app-monsters>

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

Я загрузил пользовательский интерфейс в 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);
}

и добавил следующий компонент в моем компоненте Encounters:

@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>

Но когда я нажимаю на значок, я получаю следующую ошибку:

Uncaught ReferenceError: addToEncounter не определен в HTMLSpanElement.onclick

Я гуглил это илюди говорят, что onclick () никогда не следует использовать, но я не вижу альтернатив?

Answer 1

Вы должны использовать (click) вместо onClick

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