如何传递对组件或 dom 元素的引用？

Question

有一个组件内部有 dom 个元素。我需要在服务中引用这个组件。怎么做？传递 dom 元素的 ID，创建一个引用作为组件或使用 elementref?

它需要能够显示隐藏这个组件

Answer 1

据我了解

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

@Component({
  selector: 'my-app',
  template: `
  <div>
    <input ngModel #username>
    <p>{{ username.value }}</p>
  </div>
  `
})
export class AppComponent implements AfterViewInit {
  @ViewChild('username') input: ElementRef<HTMLInputElement>;

  constructor(private renderer: Renderer2) {}
  
  ngAfterViewInit() {
    // ElementRef: { nativeElement: <input> }
    console.log(this.input);

    // Access the input object or DOM node
    console.dir(this.input.nativeElement);

    // Manipulate via Renderer2
    this.renderer.setStyle(this.input.nativeElement, 'background', '#d515a0');
  }
}

元素参考如下所示：

class ElementRef<T> {
  constructor(nativeElement: T)
  nativeElement: T
}

如何传递对组件或 dom 元素的引用？

How to pass referent to component or dom element?

angular