javascript - 从一个组件获取值(value)并将其用于另一组件。

Question

我的 Angular 2 应用程序中有两个组件文件 - home.ts 和 folder-selector.ts。我在folder-selector.ts 中有一个名为pathToNode 的变量。如何从 home.ts 访问该值？我的主组件有一个FolderSelectorService 的导入 - 我最初认为我可能需要创建一个服务调用来引用pathToNode，但这似乎不对。基本上如何获取组件之间的组件值？我应该有文件夹选择器组件的导入语句吗？

Answer 1

将数据传递给(子)组件应通过@Input完成，请阅读https://toddmotto.com/passing-data-angular-2-components-input和https://angular.io/docs/ts/latest/cookbook/component-communication.html

熟悉 Angular 2 中的数据流对于创建应用程序非常重要，数据通过 @Input 向下流动，事件通过 @Output 向上流动

您只能在组件树中向下传递数据，因此这需要将您的 home 组件嵌套在 folder-selector 内。(如果不是这种情况，您必须创建一个保存数据的父组件)

<folder-selector>
    <home [pathToNode]="pathToNode"> ...</home>
</folder-selector