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

我想访问组件标记中声明的普通HTML。假设我有一个组件

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

}

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

如何访问

AppDemoComponent

中的h1元素

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

使用

ElementRef

您可以使用

ElementRef

访问当前组件引用，从而可以查询嵌套元素

getElementsByTagName

、

querySelectorAll

和

getElementsByClassName

通过检查DOM中呈现的内容来向下查看嵌套元素，忽略任何封装

我不确定是否有一个角度特定的方法来做这件事，但使用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
    }
}

从“@angular/core”导入{Component，OnInit}
@组成部分({
选择器：“应用程序演示子对象”
模板：`
演示文本
演示文本2
演示文本3
`
})
导出类AppChildComponent{
}

---

父组件

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

从“@angular/core”导入{Component，OnInit，ElementRef}
@组成部分({
选择器：“应用程序演示父级”
模板：`
`
})
导出类AppParentComponent{
建造师(
私人elRef:ElementRef
) {  }
多斯塔夫（）{
让HeaderElsTag=this.elRef.nativeElement.getElementsByTagName（'h1'）//包含3个h3元素的数组
让HeaderLisker=this.elRef.nativeElement.querySelectorAll（'h1'）//包含3个h3元素的数组
让HeaderResClass=this.elRef.nativeElement.getElementsByClassName（'test'）//包含1个h3元素的数组
}
}

---

---

警告，这将在组件中不加区分地显示，因此请注意不要使用具有相同类名的嵌套元素，否则会产生一些难以调试的副作用。您可以使用内容子级。请点击以下链接以供参考：

看看这个