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

【问题标题】：How to access html elements of component tag?如何访问组件标签的html元素？
【发布时间】：2017-11-26 02:39:19
【问题描述】：

我想访问在我的组件标签中声明的纯 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 元素然后如何访问它。

【问题讨论】：

看看这个medium blog post

标签： html angular

【解决方案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
    }
}

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

【讨论】：

【解决方案2】：

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

【讨论】：

使用ElementRef

使用`ElementRef`