Angular HTMLElement 无法从服务中工作，但没有它就可以

Question

我在使用某些代码时遇到了一些问题，但仅在从服务调用时才出现。

在 app.component.html 我有：

<div id="wrapper"></div>

当我运行这段代码时：

this.targetElement = document.getElementById('wrapper') as HTMLElement;

来自 app.component.ts 是有效的，但我正在尝试将其移动到服务中，所以我已经这样做了：

import { Injectable } from '@angular/core';
import * as mylib from '../../assets/index.js';

@Injectable({
  providedIn: 'root'
})
export class ViewerService {

  window: any = window;
  targetElement: HTMLElement;
  viewer: any;

  constructor() { }

  viewerInit() {
    this.targetElement = document.getElementById('wrapper') as HTMLElement;
    return this.targetElement;
  }

}

然后当我从 app.component.ts 调用服务时...

ngOnInit() {
  this.viewerService.viewerInit();
}

从服务中代码将不起作用...

我该如何解决这个问题？

Answer 1

ngOnInit 早了，把你的逻辑移到AfterViewInit 钩子上。

public ngAfterViewInit(): void {
  this.viewerService.viewerInit();
}

---

如果可以将元素传递到服务中，您可以尝试下一个操作：

class AppComponent implements AfterViewInit {
  @ViewChild('wrapper') wrapper: TemplateRef<any>;

  public ngAfterViewInit(): void {
    this.viewerService.viewerInit(this.wrapper.elementRef.nativeElement);
  }
}

它的模板是这样的：

<div #wrapper></div>

还有这样的服务：

export class ViewerService {

  window: any = window;
  targetElement: HTMLElement;
  viewer: any;

  constructor() { }

  viewerInit(target?: HTMLElement) {
    if (target) {
      this.targetElement = target;
    }
    return this.targetElement;
  }
}