parent 和多个 children 之间的同步变量 angular2

Question

我有一个名为 "builder" 的 parent 组件，还有一个可变数量的 children 名为 "option-1"、"option-2"、...、"option-n".

生成器的 HTML 如下所示：

<b>Total: {{sharedVar}}</b>
<ng-container *ngFor="let option of color?.options">
   <button type="button" (click)="changeVar(sharedVar)"></button>
</ng-container>

<ng-container *ngFor="let option of options">
  <app-options [options]='option'  [(sharedVar)]="sharedVar"></app-options>
</ng-container>

在 <app-options></app-options> 中它们具有相同的功能 changeVar，它在 child 组件中更改 sharedVar。

如何在 parent + 所有 children 中将此 change/update 注册到 sharedVar？

Answer 1

'banana-in-a-box' 语法 ([()]) 只能在 Angular 和 [(NgModel)] 中使用。

通常将值绑定到组件 ([sharedVar]) 会将其赋予子组件，并且 Angular 默认情况下会通过更改检测更新子组件中的该值。

您只想确保 <app-options> 的 @Input() 属性设置为 sharedVar。

parent 和多个 children 之间的同步变量 angular2

Syncing variable between parent and multiple children angular2

angular-components

angular