Angular HTMLElement 无法通过服务工作，但没有它也可以

Question

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

在 app.component.html 我有：

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

当我运行这段代码时：

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

from 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早了，把你的逻辑移到AfterViewInithook.

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;
  }
}

Angular HTMLElement 无法通过服务工作，但没有它也可以

Angular HTMLElement not working from service but ok without it

typescript

angular

angular9