如何以编程方式更改已呈现的组件的输入值(Angular 2)

时间:2016-06-27 09:10:34

标签: angular angular2-components

在我的Angular 2应用程序中,我有一个组件(mainComp),其中包含另一个组件

 <my-comp></my-comp>

my-comp 通过

发出(在选择/点击时)它的值(这是自定义下拉菜单)
this.optionSelected.emit(currentOption == "Not described" ? null : currentOption);

mainComp通过

获得下拉列表的值

1 个答案:

答案 0 :(得分:3)

您已获得双向绑定,因此如果对象发生更改,则还应刷新结果。如果您有一个EventEmitter,请在构造函数中订阅,如:

class MainComp {
  let value;
  ...
  constructor(private myComp : MyComp) {
    myComp.optionSelected.subscribe{
      (value) => this. value = value;
    }
}

现在,每当EventEmitter触发emit时,MainComp中的value-attribute都会更新。

如果你想要一些简洁的东西,请看一下ngOnChanges(https://angular.io/docs/ts/latest/cookbook/component-communication.html

<强>更新: 你的意思是......像这样:

class MainComp {
  template: `<myComp [(value)]=value></myComp>`
  ...
}

class MyComp {
  @Input(): value;
  ...
}

这应该创建双向绑定,因此如果其中一个组件编辑值,则另一个得到通知。 看看这个:https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngModel