angular2 - 组件之间的通信
angular2 - communication between components
我搜索组件与 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>
。
有人可以帮我解决这个问题吗?
根据你的问题,我假设你想要这样的东西:
@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 之间的通信,但我需要的有点不同。 我有这样的结构:
父亲 --> 儿子 --> 儿子
我的代码如下所示
父组件:
@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>
。
有人可以帮我解决这个问题吗?
根据你的问题,我假设你想要这样的东西:
@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;
}
}
未测试