角度2-4的组件之间的双向绑定

时间:2017-11-02 11:01:04

标签: angular two-way-binding

我希望将子组件值绑定到父组件。如果@Input()[(ngModel)]不够,如何完成此操作?

here is a plunker

3 个答案:

答案 0 :(得分:8)

此处您还必须设置@Output并更改组件

export class CounterComponent {

  @Output('initoChange') emitter: EventEmitter<string> = new EventEmitter<string>();
  @Input('inito') set setInitoValue(value) {
      this.count = value;
  }
  count: number = 0;

  increment() {
    this.count++;
    this.emitter.emit(this.count);
  }

  decrement() {
    this.count--;
    this.emitter.emit(this.count);
  }

}

以下是plunker的链接,请查看。

答案 1 :(得分:3)

您可以进行双向数据绑定,如下所示:

@Component({

selector: 'app-sizer',
  template: `
  <div>
    <button (click)="dec()" title="smaller">-</button>
    <button (click)="inc()" title="bigger">+</button>
    <label [style.font-size.px]="size">FontSize: {{size}}px</label>
  </div>`
})
export class SizerComponent {
  @Input()  size: number | string;
  @Output() sizeChange = new EventEmitter<number>();

  dec() { this.resize(-1); }
  inc() { this.resize(+1); }

  resize(delta: number) {
    this.size = Math.min(40, Math.max(8, +this.size + delta));
    this.sizeChange.emit(this.size);
  }
}

在父组件的模板中,对size进行双向绑定,如下所示:

<app-sizer [(size)]="fontSizePx"></app-sizer>
<div [style.font-size.px]="fontSizePx">Resizable Text</div>

它(双向绑定)只是属性绑定的语法糖,因此它等同于:

<app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>
[(prop)]具有名为prop的{​​{1}}属性和名为{{1}的事件(Input属性)时,可以使用

prop语法}。

代码来自angular docs以获取更多信息导航到此地址: https://angular.io/guide/template-syntax#two-way-binding---

答案 2 :(得分:0)

使用@Output() 例如

@Output() event: EventEmitter<Type> = new EventEmitter();

通过emit功能

发送数据
send(): void {
  this.event.emit(data);
}

详细了解EventEmitter