Angular 2和EventEmitter

Question

您好我已经开始研究Angular 2了。 也许有人可以帮我解决有关Angular 2中EventEmitter和outputs的问题

我有3个组件。

AppComponent是CountriesListComponent的父级。

CountriesListComponent是CountryInfoComponent

的父级

AppComponent - ＆gt; CountriesListComponent - ＆gt; CountryInfoComponent

当有人点击某个国家/地区时，

AppComponent有自己的功能。

AppComponent的模板是这样的：

@Component({


template: `...

< countries-list (OnCountrySelected)="countryWasClicked($event)" >
< /countries-list >
`
...

})

class AppComponent {
countryWasClicked(country: Country): void
  {

  }
}

函数OnCountrySelected是我想要监听的输出的名称。但我只能在CountriesListComponent的下一个孩子那里听，不是吗？ 我想在OnCountrySelected中听取CountryInfoComponent。

但我不知道我是否可以通过一些孩子发送输出。

提前致谢！

Answer 1

您可以确定链接事件，但这不是最佳做法。 像CountriesListComponent模板中的这样：

@Component({
template: `...
  < country-info (OnCountrySelected)="countryWasClicked($event)" >
  < /country-info >
`
...
})
class CountriesListComponent {
 @Output() OnCountrySelected:EventEmitter = ...
 countryWasClicked(country: Country): void
   {
     this.OnCountrySelected.emit(country);
   }
 }

但是我建议使用（和学习）Redux方法来处理复杂的应用程序状态逻辑，你可以使用这个： https://github.com/ngrx/store

Answer 2

这可能有助于您找到答案（更具体地说是共享模型或服务事件）：

https://stackoverflow.com/a/34703015/6157104

Answer 3

你需要在CountryInfoComponent中使用@Input（）装饰器，可能应该将其命名为country。然后在CountryListComponent中，您将所选国家/地区提供给信息组件，如<app-country-info [country]="selectedCountry">。所选国家/地区应为CountryListComponent的公共属性。并且它的值可以在已用于发射的函数中设置。

长话短说，这是一个输入装饰器情况，而不是输出装饰器。