javascript - 从应用程序组件中清除/删除 Angular App 服务变量依赖项的使用

Question

我有使用 Angular cli 配置的单页应用程序（SPA）Angular7。这是具有不同角度服务的大型应用程序，包括全局和组件级别。

应用程序组件使用服务、I/O 事件、发射器用于不同组件之间的通信。

所以请建议并指导我删除组件内至少 50% 的服务变量使用。例如，请参见下面使用内部组件的代码服务变量。

但是在这里我面临的问题是每个服务都有多个公共变量。并且这些服务公共级别声明的变量也使用在不同的不同组件中。如果我愿意的话，一个组件中的变量带有值，而另一个组件中的值将未定义使用应用程序路由。

我可以使用任何其他更好的方法来代替声明服务变量和访问内部组件。

请任何帮助。

应用服务.ts

@Injectable({
  providedIn: 'root'
})

export class AppService {

public isApplicationInitialized=false;
..
...

}

app.component.ts

import { Component } from '@angular/core';
import {AppService} from './AppService'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {

  title = 'App';

  constructor(public appService:AppService){
  this.appService.isApplicationInitialized=true;
  ...
  ..
  }  

}

标签： javascriptrxjsangular7

Answer 1

Angular 服务是非常强大的工具。它们允许您将依赖项注入组件或其他服务（服务依赖于另一个服务）。

基本上，它们的存在是为了让您以解耦的方式管理数据：组件需要获取/保存一些数据？与其在组件中获取它，不如注入一些相关的服务并通过该服务获取数据。您的组件应该只专注于呈现和与用户交互的业务。

使用服务，组件可以共享数据而无需真正了解彼此。

提供者设置（在 AppModule 或组件声明中）可以进一步配置您的服务如何注入和使用。

话虽如此，您可以滥用此选项并糟糕地构建您的应用程序，从而导致繁琐的编码和许多不相关的服务。

我对您的建议是首先查看项目的“大图”，然后根据数据域对其进行相应的结构化，这样每个数据的位置以及负责它的服务会更清楚。看到有很多依赖的组件构造函数是很常见的，不要为此感到难过。