angular2 - 组件之间的通信答案

【问题标题】：angular2 - communication between componentsangular2 - 组件之间的通信
【发布时间】：2016-05-01 00:48:03
【问题描述】：

我用Angular2搜索组件之间的通信，但我需要的有点不同。我有这样的结构：

父亲 --> 儿子 --> 儿子

我的代码如下所示

父组件：

@Component({
selector: 'app',
templateUrl: './instituicao/components/instituicao.html',
directives: [InstituicaoForm, InstituicaoList]
})

export class InstituicaoCmp {}

我的 instituicao.html

<instituicao-form>
    <div class="row">
        <instituicao-list></instituicao-list>
    </div>
</instituicao-form>

我在<instituicao-form> 有一个表单，当用户单击<instituicao-list> 中的某个表列表项时，我想填充该表单 <instituicao-list> 这样的东西：

<tr role="row" *ngFor="#item of items | instituicaoPipe : searchItems">
          <td>{{item.id.idInstituicao}}</td>
          <td>{{item.descInstituicao}}</td>
          <td>
            <button class="btn btn-link" (click)="HERE I WANT TO POPULATE FORM AT INSTITUICAO-FORM COMPONENT(item)"> Editar</button>
          </td>
        </tr>

我的 instituicao-form html 只是一个包含 <input type="text" [(ngModel)]="item.idInstituicao" 等字段的表单

我只能在 <instituicao-form> 使用 ng-model 来做到这一点并将我的名单也放在<instituicao-form>。

请有人可以帮我解决这个问题？

【问题讨论】：

标签： angular angular2-directives angular2-forms

【解决方案1】：

根据您的问题，我假设您想要这样的东西：

@Component({
  selector: 'app',
  directives: [InstituicaoForm, InstituicaoList],
  template: `
  <instituicao-form #form>
    <div class="row">
      <instituicao-list (selectionChanged)="#form.update($event)></instituicao-list>
    </div>
  </instituicao-form>`,
})
export class InstituicaoCmp {
}

@Component({
  selector: 'instituicao-list',
  template: `
    <tr role="row" *ngFor="#item of items | instituicaoPipe : searchItems">
      <td>{{item.id.idInstituicao}}</td>
      <td>{{item.descInstituicao}}</td>
      <td>
        <button class="btn btn-link" (click)="select(item)"> Editar</button>
      </td>
    </tr>`,
})
export class InstituicaoList {
  var items;
  @Output() selectionChanged: EventEmitter = new EventEmitter();
  select(item) {
    this.selectionChanged.emit(item);
  }
}

@Component({
  selector: 'instituicao-form',
  template: `
<form>
  ...
</form>`,
})
export class InstituicaoForm {
  var item;
  update(value) {
    this.item = value;
  }
}

未测试

【讨论】：