如何访问组件标签的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
    }
}

警告，这会在你的组件中不加选择地看，所以要小心你没有具有相同类名的嵌套元素，否则你将有一些难以调试的副作用

Answer 2

您可以使用内容子项。供您参考，请点击以下链接： content children vs view children