Question

我有两个兄弟组件，一个需要将数据发送到另一个。通信应该在英雄组件和遇到组件之间进行：

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

 <app-monsters></app-monsters>

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

我有uploaded the UI to imgur来澄清这个问题。当有人点击其中一位英雄时，点击的英雄应该被添加到＆＃34;英雄＆＃34;在遭遇组件中。

我创建了一个共享服务：

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)});
}

Heroes组件的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>

但是当我点击徽章时，我收到以下错误：

未捕获的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>

角度中兄弟组件之间的通信

1 个答案: