Question

假设我有以下情况：

@Component({
  selector: 'my-app',
  template: `
    <my-component
        [(value)] = "value"
        (change)="onChange($event)"
    ></my-component>
    <br /><br />
    <input [(ngModel)]="value" />
  `,
  directives: [MyComponent]
})

现在，如果我更改输入的值，则Component正确获取新值并执行一些逻辑。为了更新组件的输入值，我需要做什么（双向）。

由于

Answer 1

您需要使用名称@Component({ (...) }) export class MyComponent { @Input() value:string; @Output() valueChange:EventEmitter<string>; constructor() { this.valueChange = new EventEmitter(); } updateValue() { this.value = 'some other value'; // Will update the value in the parent component this.valueChange.emit(this.value); } }定义emit元素，如下所示：

value

在事件发射器上调用方法时，将更新父组件中的<div id="AboutPictures"> <div id="ya"> <img style='border:5px solid #F00' src="http://41.media.tumblr.com/3ad1ef80a08560a7e5f6be2b31f13c2/tumblr_n5wto2Ukmf1txjmgjo1_1280.jpg"> <figure> <figcaption>Hello I am Edward</figcaption> </figure> </div> </div>属性，因为您使用了语法#AboutPictures { background-color: rgb(0,200,255); height:100%; } #ya{ float:right; } #ya figure{ float:right; }。

请参阅此plunkr：https://plnkr.co/edit/TNG2BK?p=preview。

在Angular2中将组件与ngModel集成

1 个答案: