角度2-4中组件之间的两种方式绑定答案

【问题标题】：Two way binding between components in angular 2-4角度2-4中组件之间的两种方式绑定
【发布时间】：2018-04-14 21:08:50
【问题描述】：

我希望将子组件值绑定到父组件。当@Input() 和[(ngModel)] 不够用时如何做到这一点？

here is a plunker

【问题讨论】：

你的意思是要访问父组件中的子组件方法和变量吗？
实际上我希望子组件内部的更改能够影响父组件中的变量值。
你可以在你的 Input() stackoverflow.com/questions/36653678/…987654322@上使用一个get集

标签： angular two-way-binding

【解决方案1】：

您可以进行双向数据绑定，如下所示：

@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 的Input 属性和名称为propChange 的事件（Output 属性）时，可以使用[(prop)] 语法。

代码来自 Angular 文档以获取更多信息，请导航至此地址： https://angular.io/guide/template-syntax#two-way-binding---

【讨论】：

使用 Angular 6，我从 http 请求中获取图像数组并使用 ngfor 推入数组并显示。对于第一组它可以工作，并且在页面滚动后动态获取图像不起作用。文本的获取也在滚动上动态工作你能帮我吗？

【解决方案2】：

在这里您还必须设置@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的链接，请看一下。

【讨论】：

非常感谢！您的意思是 @Output 键必须是 ('[var]Change') 因此 'intoChange'，对吧？
在 plunker here 中做了一个小改动，直接在子组件输入中的更改也被渲染了。

【解决方案3】：

使用@Output() 例如

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

通过emit函数发送数据

send(): void {
  this.event.emit(data);
}

阅读更多关于EventEmitter

【讨论】：