angular2 - 组件之间的通信

Question

我搜索组件与 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> 中的 table 列表中的某个项目时，我想填充该表单在 <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>。

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

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

未测试

angular2 - 组件之间的通信

angular2 - communication between components

angular

angular2-directives

angular2-forms