html - 如何访问组件标签的html元素？

Question

我想访问在我的组件标签中声明的纯 HTML。假设我有组件

@Component({
  selector: 'app-demo'
  template: '<some_template></some_template>'
})
export class AppDemoComponent {

}

如果我在另一个组件的标签内定义 h1

<app-demo>
  <h1> demo text </h1>
</app-demo>

如何访问 AppDemoComponent 中的 h1 元素？

编辑:这个问题与 ViewChild 无关，因为 ViewChild 从组件的当前模板中获取信息。我问的是组件标签是否在不同的文件中被调用并且标签有 HTML 元素然后如何访问它。

Answer 1

使用ElementRef

您可以使用 ElementRef 访问当前组件引用，允许您查询它的嵌套元素。

getElementsByTagName、querySelectorAll 和 getElementsByClassName 将通过检查 DOM 中呈现的内容向下查看嵌套元素，忽略任何封装 Angular 确实如此。

我不确定是否有特定于 Angular 的方法来做到这一点，但使用 vanilla JS 可以让你做到这一点。

---

子组件

import { Component, OnInit } from "@angular/core"

@Component({
    selector: 'app-demo-child'
    template: `
        <h1> demo text </h1>
        <h1 class="test"> demo text2 </h1>
        <h1> demo text3 </h1>
    `
})
export class AppChildComponent {
}

---

父组件

import { Component, OnInit, ElementRef } from "@angular/core"

@Component({
    selector: 'app-demo-parent'
    template: `
        <app-demo-child></app-demo-child>
    `
})
export class AppParentComponent {
    constructor(
        private elRef:ElementRef
    ) {  }

    doStuff() {
        let HeaderElsTag = this.elRef.nativeElement.getElementsByTagName('h1') // Array with 3 h3 elements
        let HeaderElsQuer = this.elRef.nativeElement.querySelectorAll('h1') // Array with 3 h3 elements
        let HeaderElsClass = this.elRef.nativeElement.getElementsByClassName('test') // Array with 1 h3 element
    }
}

---

警告，这会在您的组件中不分青红皂白地显示，因此请注意您没有具有相同类名的嵌套元素，否则您将遇到一些难以调试的副作用