再次关于 Angular2 中的全局数据

Question

如果我的 angular2 应用程序看起来像这样，并且顶部的金发女郎要与右侧中间的姜黄交谈，他们应该为此组织一个聚会吗？

发出事件，使用输入和输出 - 这是 angular2 方式？数据应该从子节点到父节点再到根节点，然后从父节点到子节点再到节点？我是新来的，我经常想要一些全局对象，我可以在其中保留所有组件需要知道的一些信息。当该全局对象中的数据发生变化时，它应该在它注入的所有其他服务和组件中神奇地发生变化。例如用户登录/注销，或者如果他点击按钮等等。

import {Injectable} from 'angular2/core';

@Injectable()
export object Globals {
    logged: false,
    showThatDiv: true
}

但我在某处读到它是 Angular1，而不是 Angular2 方式。这样对吗？还是我错了？它看起来不像全局汤，只是全局状态的对象。

例如现在我有这个结构：

|-root
  |-google api component
    |-google auth
    |-youtube api
      |-playlists
      |-video
  |-myComponent
    |-sub1
      |-sub2
        |-sub3
  |...

mySub1 组件需要知道用户是否登录，如果是，则在 sub2 中显示 (*ngIf) 一些 div。或者从 googleAuth 服务中的 mySub3 组件调用 checkGauth() 。从 mySub2 组件将视频添加到 YouTube 播放列表并在 sub2 中添加显示结果，或者从 sub3 创建新的播放列表并在 sub2 上显示。很多变种。

我已经厌倦了为所有这些编写代码。它使它更复杂。有时会考虑这样做：

 |-root
   |-google api component
   |-google auth
   |-youtube api
   |-playlists
   |-video
   |-myComponent
   |-sub1
   |-sub2
   |-sub3
   |...

Answer 1

为您的每个 API 构建 服务 是一种很好的方式，可以将组件隔离开来，避免混淆在一起。在您的情况下，您需要构建一个 GoogleService，它可以在应用程序运行的当前状态下保存您的上下文。服务可以在需要的时间和地点注入到您的组件中。

话虽如此，在某些情况下我们无法画出细线。在这些情况下，

1. 消息传递，通过您的组件传递数据，在您的情况下，如果您的父母知道登录并且孩子想了解登录，则通过它并且绑定将保持它已更新，以便您在您的子组件上可靠地使用它。

2. 创建一个 Helper 来封装与您的功能相关的所有功能。使用旧式导入引用它并将其用于您的组件。

发出事件，使用输入和输出 - 这是 angular2 方式？

是的，这是了解您的组件需要什么以及组件发出什么的最佳方式。但这并不难，双向数据绑定让您轻松完成这项工作。

数据应该从子节点到父节点再到根节点，然后从 父母对孩子的意思？

让子通过 Inputs 从 Parent 获取数据，并以回调的形式返回输出，Checkout this Blog to see how it is done on a real world app.

希望它可以帮助您入门。欢迎使用 Angular 2，你会喜欢这里的！