Angular 绑定到子组件事件

我有一个组件是“输入”和“跨度”：

选择国家

单击“span”将打开一个模式窗口，其中包含所有国家/地区的列表。通过单击模式窗口底部列表中的一个国家，一旦解锁，“选择”按钮。然后，按下“选择”按钮后，以前选择的国家/地区应显示在“输入”中

以下是模态窗口代码：

modal.html：

<div class="card">
  <div class="row">
    <div class="card-content table-responsive">
      <div class="col-md-12">
          <table class=" table table-hover">
            <thead>
              <tr>
                <th >Country</th>
              </tr>
            </thead>
            <tbody>
              <tr  class="{{selectedCountry == country ? 'active' : ''}}" *ngFor="let country of countries" (click)="updateSelectedCountry(country?.country_id)">
                <td>{{country.name}} </td>
              </tr>
            </tbody>
          </table>
      </div>
      <div class="col-md-12">
          <button type="submit" (click)="cancel();">Close</button>
          <button type="submit" [disabled]="!selectedCountry?.name" (click)="onClick()">Select</button>
      </div>
    </div>
  </div>
</div>

国家
{{country.name}
接近
挑选

modal.ts：

...

export class CountryModalComponent  implements ModalComponent<any> {


  countries: Array<Country>;
  selectedCountry = null;

  constructor(
    public dialog: DialogRef<any>,
    public authTokenService: Angular2TokenService, 
    private servCountry: CountryService
  ) { 
    this.countries = new Array<Country>();
  }

  ngOnInit() {
    this.loadCountries();
  }

  private loadCountries() {
    this.servCountry.getCountries().subscribe(countries => this.countries = countries);
  }

  cancel(): void {
    this.dialog.close(null);
  }


  updateSelectedCountry(CountryId) {
    this.selectedCountry = this.countries.find(el => {
      return el.country_id === CountryId
    })
  }

}

。。。
导出类CountryModalComponent实现ModalComponent{
国家：阵列；
selectedCountry=null；
建造师(
公共对话框：DialogRef，
公共authTokenService:Angular2TokenService，
私人服务国家：CountryService
) { 
this.countries=新数组（）；
}
恩戈尼尼特（）{
这是loadCountries（）；
}
私人股本国家（）{
this.servCountry.getCountries（）.subscribe（countries=>this.countries=countries）；
}
取消（）：无效{
this.dialog.close（空）；
}
updateSelectedCountry（CountryId）{
this.selectedCountry=this.countries.find（el=>{
返回el.country_id===CountryId
})
}
}

---

我知道可以用@Output完成。但我不知道如何从列表中选择项目，然后单击“选择”按钮在输入中显示此信息。

使用

EventEmitter

，以便在

更改事件时从一个组件获取另一个组件的值occurs@AkhilAravind有什么例子吗？像我这样的类似情况是否可取？检查文档，或者有简单的示例
...

export class CountryModalComponent  implements ModalComponent<any> {


  countries: Array<Country>;
  selectedCountry = null;

  constructor(
    public dialog: DialogRef<any>,
    public authTokenService: Angular2TokenService, 
    private servCountry: CountryService
  ) { 
    this.countries = new Array<Country>();
  }

  ngOnInit() {
    this.loadCountries();
  }

  private loadCountries() {
    this.servCountry.getCountries().subscribe(countries => this.countries = countries);
  }

  cancel(): void {
    this.dialog.close(null);
  }


  updateSelectedCountry(CountryId) {
    this.selectedCountry = this.countries.find(el => {
      return el.country_id === CountryId
    })
  }

}