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

Question

我能够访问 DOM 元素组件，如下所示

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

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

ps：这与如何在组件中访问它们并不重复。

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 以将“import”添加到服务中，并将该项目添加到其“@NgModule”装饰器中的“providers”数组中：

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

关于仅将角度服务用于数据的主题，我不同意。正如您可以在官方服务架构指南中阅读的那样：

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

服务是一个广泛的类别，涵盖应用程序所需的任何价值、功能或特性。

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

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

希望这对某人有帮助。

Answer 2

你不能在服务业。你可以像 javascript 那样做到这一点document.getElementById。

在组件和指令中您可以使用ViewChildfrom@angular/core

HTML：

<div class="my_class" #myElement></div>

TS：

    import { ElementRef, ViewChild } from '@angular/core';


    @ViewChild('myElement') myElement:ElementRef;

console.log(this.myElement.nativeElement.offsetHeight); // inside any function.

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

document.getElementsByClassName("my-class");

注意：只能在内部执行此操作components，directives不能在内部执行此操作services

为什么选择服务

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

来源： https: //angular.io/tutorial/toh-pt4

简单来说：

• 组件，用于呈现、操作 DOM 并与之交互的指令

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