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

Question

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

 <my-comp></my-comp>

my-comp 通过

发出（在 select / 点击）它的值（这是一个自定义下拉列表）

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

mainComp 通过

接收下拉列表的值

Answer 1

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

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

现在，每次 EventEmitter 触发时，MainComp 中的值属性都会更新。

如果你想要一些花哨的东西，看看 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

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

How to programatically change the input value of a component which was already rendered (Angular 2)

angular2-components

angular