Question

这个plunker是由Angular团队创建的：

https://angular.io/resources/live-examples/structural-directives/ts/plnkr.html

在文件structural-directives.component.html中有代码......

<div><!-- Visibility -->
  <button (click)="isVisible = !isVisible">show | hide</button>
  <heavy-loader [style.display]="isVisible ? 'inline' : 'none'" [logs]="logs"></heavy-loader>
</div>

<div><!-- NgIf -->
  <button (click)="condition = !condition">if | !if</button>
  <heavy-loader *ngIf="condition" [logs]="logs"></heavy-loader>
</div>

<h4>heavy-loader log:</h4>
<div *ngFor="let message of logs">{{message}}</div>

然后在文件heavy-loader.component.ts中有代码......

@Input() logs: string[];

和同一档案中的其他地方..

this.logs.push(msg);

现在我不希望子组件中的这个推送（msg）影响父组件中的logs数组，因为绑定是从父到子的一种方式。

但是，它实际上影响了父结构 - 指令组件中的logs数组，正如父模板中此代码所证明的那样。

<div *ngFor="let message of logs">{{message}}</div>

执行时会显示正在将消息添加到父级的日志数组中。

任何人都可以解释为什么会这样吗？感谢

Answer 1

在我看来，重点关注的是logs和StructuralDirectivesComponent之间共享HeavyLoaderComponent数组的一个实例。

在StructuralDirectivesComponent中，您可以通过

行创建实例

logs: string[] = [];

然后通过

将同一个实例传递给HeavyLoaderComponent

<heavy-loader *ngIf="condition" [logs]="logs"></heavy-loader>

此时，logs HeavyLoaderComponent对StructuralDirectivesComponent所做的任何更改也会由freeme看到，反之亦然，因为他们正在处理相同的实例。

在这方面，我不确定谈论双向单向绑定是否正确，而是关于在组件之间共享模型。

我希望它有所帮助

Answer 2

@Picci是对的。

如果使用通过值传递的基本类型（布尔值，数字，字符串和对象引用），则会有所不同 - 这意味着在传递时，会为接收器创建值的副本。

对于对象（和数组是一个对象），只创建指向对象的引用副本并将其传递给接收者，但两个引用仍然指向同一个数组。

当数组内容（或任何其他对象的内容）发生变化时，两者都会看到这些变化，因为只有一个数组。

在Angular2团队示例代码中，为什么明显的单向绑定似乎像双向绑定一样工作？

2 个答案: