如何以编程方式更改已呈现的组件的输入值（Angular 2）(How to programatically change the input value of a component which wa

如何以编程方式更改已呈现的组件的输入值（Angular 2）(How to programatically change the input value of a component which was already rendered (Angular 2))

在我的Angular 2应用程序中，我有一个组件（mainComp），其中包含另一个via

<my-comp></my-comp>

my-comp通过发出（在选择/点击时）它的值（它是一个自定义下拉列表）

this.optionSelected.emit(currentOption == "Not described" ? null : currentOption);

mainComp接收下拉列表的值

In my Angular 2 app I have a component (mainComp) which includes another one via

<my-comp></my-comp>

my-comp emits (on select / click) it's value (it's a custom dropdown) via

this.optionSelected.emit(currentOption == "Not described" ? null : currentOption);

mainComp receives the value of the dropdown by

最满意答案

你有一个双向绑定，所以如果对象发生了变化，结果也应该刷新。 如果你有一个EventEmitter，请在构造函数中订阅，如：

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

现在，每次EventEmitter触发时，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

You've got a 2-way-binding, so if the object changes, the result should also be refreshed. If you've got an EventEmitter, subscribe in the constructor like:

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

Now, everytime the EventEmitter fires emit, the value-attribute in MainComp will be updated.

If you want to something facy, take a look at ngOnChanges (https://angular.io/docs/ts/latest/cookbook/component-communication.html)

Update: Do you mean sth. like this:

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

This should create a 2-way-binding, so if one of the Components edits value, the other gets notified. Take a look at this: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngModel