Javascript 如何在angular 4服务中访问DOM元素？

我可以访问DOM元素组件，如下所示

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

我试图在服务类中实现同样的功能，但是dom元素和模板在服务类中是不可访问的

---

p、 s：这与在组件中访问它们的方式不同。

您不能在服务中访问它们。您可以像

document.getElementById

那样通过javascript实现

在组件和指令中，您可以使用

@angular/core

HTML:

我猜你不能通过角度的方式直接使用CSS选择器访问。或者，您可以只使用普通的旧JavaScript

document.getElementsByClassName("my-class");

注意：您只能在

组件

和

指令

中执行此操作，而不能在

服务

为什么提供服务

组件不应该直接获取或保存数据，当然也不应该故意提供虚假数据。他们应该专注于呈现数据并将数据访问委托给服务

资料来源：

简单来说：

• 组件，用于表示、操作和与DOM交互的指令

• 服务用于组件和后端之间的数据处理

---

您可以使用纯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);
  }
    
}

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

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

关于仅将angular services用于数据的主题，我不同意。正如您在《服务的官方体系结构指南》中所读到的：

服务是一个广泛的类别，包含应用程序需要的任何价值、功能或特性

组件可以将某些任务委托给服务，例如从服务器获取数据、验证用户输入或直接登录到控制台

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

---

希望这对某人有所帮助。

这是我的问题。如何在服务中访问它们。您不能。了解组件和服务之间的区别。更新了我的答案，请检查“否”。不重复。读我的问题

document.getElementsByClassName("my-class");

// 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

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