javascript - 如何访问 Angular 4 服务中的 DOM 元素？

Question

我可以像下面这样访问 DOM 元素组件

declare var jQuery: any;
declare var $: any;
//component stuff 
$('.my_class').innerHeight();

我正在尝试在服务类中实现相同的功能，但是在服务类中无法访问 dom 元素和模板。

p.s:这不是如何在组件中访问它们的重复。

Answer 1

您可以使用普通的 javascript 文档对象从 Angular 服务访问 DOM，并向您的服务添加一些小内容:

// We import not only "Injectable", but "Inject" too, from @angular/core
import { Injectable, Inject } from '@angular/core';
// We import DOCUMENT from @angular/common. Be careful, because the old import from '@angular/platform-browser' is deprecated.
import { DOCUMENT } from '@angular/common';

// Our standard service class in the usual way
@Injectable()
export class LoadingSpinnerService {

  // In the constructor we inject a dependency to DOCUMENT, of type HTMLDocument
  constructor(@Inject(DOCUMENT) private document: HTMLDocument) {     
    // We create a new div in the DOM, child of the body tag, <div id="LoadingSpinner"></div>
    var NewDomElement = this.document.createElement("div");
    NewDomElement.setAttribute("id", "LoadingSpinner");
    document.body.appendChild(NewDomElement);
  }
    
}

正如您可能知道的那样，您可以使用类似以下内容的命令行来创建服务:

ng g s loading-spinner

不要忘记编辑 app.module.ts 以将“导入”添加到服务，并将项目添加到其“@NgModule”装饰器中的“提供者”数组:

import { LoadingSpinnerService } from './WHATEVER-DIRECTORY-YOU-CREATE-THE-SERVICE/loading-spinner.service';
(...)
providers: [LoadingSpinnerService, 
(...)

关于仅将 Angular 服务用于数据的主题，我不同意。正如您在服务的官方架构指南中所读:

https://angular.io/guide/architecture-services

Service is a broad category encompassing any value, function, or feature that an app needs.

A component can delegate certain tasks to services, such as fetching data from the server, validating user input, or logging directly to the console.

本文档中提供的示例仅适用于日志数据服务。

希望这对某人有帮助。