1

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

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

我的代码看起来像这样

父组件：

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

export class InstituicaoCmp {}

我的学院.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"

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

请问有人可以帮我吗？

4

1 回答 1

2

从你的问题我假设你想要这样的东西：

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

未测试

于 2016-01-24T20:22:49.137 回答