主页 / 问题 / 896489
Accepted
A. Victor
Asked:2020-10-23 00:59:03 +0000 UTC2020-10-23 00:59:03 +0000 UTC

Angular 2 正确和不正确地使用服务和组件模块？

  • 772

首先，非常感谢您。现在有2个问题第一个关于结构的问题。我是新来的。我阅读了有关模块、组件、服务的内容，但我仍然不完全理解这些实体中的每一个中哪些任务是固有的，哪些是外来的。我将特别感谢这种形式的回答：这些是模块的任务，但这些是模块不可能的，最好将其委托给组件。等等。是否可以让一项服务完成向不同服务器发出两个请求的任务，还是我需要编写两项服务？为什么？

第二个问题是实用的。我正在编写一个查询天气 API 的课程。用户输入cityName。我将第一个请求发送到 json 文件所在的服务器，我即时发送名称，我得到名称中具有相同字母的城市列表。我正在为用户制作一个实时下拉工具提示。

例如：你输入了 kongo，出现一个提示：

    0: "{"id":202239,"name":"Gikongoro, RW"}"
    1: "{"id":1064234,"name":"Ikongo, MG"}"
    2: "{"id":212360,"name":"Kongolo, CD"}"
    3: "{"id":2359142,"name":"Kongoussi, BF"}"

然后在用户点击所选城市后。我将它的 id 发送到天气服务器。我从 API 获取 json 天气。我画出答案天气预报。

问题：在这个应用程序的最佳结构中应该有多少和哪些模块，哪些组件和服务应该有什么任务？我提前发誓。

angular2

1 个回答

  1. Best Answer

    您的问题并不完全清楚，但我会尽力回答，因为您自己知道正确的问题是答案的一半。

    Angular 中的模块是一个相当复杂的话题，但我将尝试用简单的术语来解释。Angular 中模块的概念主要是为了实现“关注点分离”的原则。每个模块都是一个黑盒子，封装了一定的业务逻辑。当然，在实践中，模块通过按需加载（延迟加载）的能力来提高大型应用程序的性能。模块没有任何任务，您不需要为它们分配任何东西或编写任何代码，模块没有生命周期。模块的目的主要是编译其中声明的组件declarations，每个模块都有自己的类实例Compiler，由于模块的次要目的是管理DI机制（依赖注入），在运行时模块也是一个注入器。

    @NgModule()
export class AppModule {
    constructor(injector: Injector) {
        console.log(injector.constructor.name === 'NgModuleRef_'); // true
    }
}

    如果您将令牌的依赖项注入Injector到模块中，那么模块将收到指向自身的链接。

    Google 团队，即 Misko Heveri（Angular 团队负责人），决定在开发 Angular 1.x 时让人们有机会使用 SCA 架构（服务组件架构）。如果我们现在谈论的是 Angular 2+，那么服务还有一个目标是隔离可以在组件之间翻找的逻辑reusable。任何服务都必须做一些特定的事情。

    你可以将所有的逻辑完全写在一个组件中，然后从组件发出请求，操作大数据，但这一切都破坏了设计，而分解才是最重要的。在组件中，您只需要实现数据更新逻辑。

    在 Angular 的情况下，VM（视图模型）是数据和最终用户看到的视图之间的中间层，VM 的任务是更新模型，您将其余逻辑交给服务。Можно ли одному сервису дать задачу делать оба запроса на разные серверы или нужно писать два сервиса?- 由您自行决定。

    升级版：

    没有组件架构之类的东西，只有应用程序架构。关于您的“天气预报”应用程序，我将只创建 1 个服务来使用 API，我会调用它WeatherService，以及几个组件，一个用于在用户选择城市后显示天气的组件、一个搜索组件和一个提示组件。所有应用程序都没有特定的结构，Angular 是一个同构平台，允许您设计任何复杂的架构。一旦确定了问题/提出了要求/制定了设计计划，所有这些高级设计就会发挥作用，这一切都是非常情景化的。

    在图中，组件没有给出任何东西，这些箭头原则上可以称为委托，但实际上它们表明组件不直接与状态管理器通信，而是使用中间层（intermediary），尽管反过来，经理在工作完成后，可以通知组件一些信息。该图是当今任何企业 Angular 应用程序的一个小基础，每个人都从它开始。

    • 3

相关问题