如何获取 angular2 组件的父 DOM 元素引用答案

【问题标题】：How to get the parent DOM element reference of an angular2 component如何获取 angular2 组件的父 DOM 元素引用
【发布时间】：2017-05-07 12:04:26
【问题描述】：

我需要访问包含组件的父 DOM 元素的某些属性，我想从中获取信息，有没有办法做这样的事情？

这是我的组件的样子：

import { Component, Input } from "@angular/core";

import "./loadingSpinner.component.css!";

    @Component({
        selector: "loading-spinner",
        template: `
            <div *ngIf="showSpinner" class="loader-directive-wrapper">
                <div class="loader"></div>
            </div>`
    })
    export class LoadingSpinnerComponent {
        @Input() public showSpinner: boolean = false;
    }

【问题讨论】：

我需要访问父 DOM 元素，而不是父组件，我需要知道一些父 DOM 属性，例如宽度或高度

标签： angular dom angular2-components

【解决方案1】：

如果您想从父组件获取数据，您可能需要查看组件之间的数据交换方法。在我看来，您可能想看看 Input 装饰器。您可以执行以下操作： <app-spinner show="true"></app-spinner> 要么 <app-spinner show="isBusy()"></app-spinner>

在这里看看：https://angular.io/guide/inputs-outputs

【讨论】：

我认为问题是完全相反的，它使用 @Output 并在父级中监听它。

【解决方案2】：

constructor(elementRef:ElementRef) {
  elementRef.nativeElement.parentElement....
}

【讨论】：

你能解释一下吗？最好举个例子？为什么最后有尾随点？孩子现在可以使用哪个对象/变量？这是要添加到子组件还是父组件中？
父点是您的自定义代码此代码是子元素。 elementRef 指向“self”，“elementRef.nativeElement.parentElement”指向父元素。如果要访问组件而不是元素，则需要注入组件。 angular.io/guide/…

【解决方案3】：

要访问父级的值，您可以使用@input。用于更改父值试试这个例子

子组件

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'rio-counter',
  templateUrl: 'app/counter.component.html'
})
export class CounterComponent {
  @Input()  count = 0;
  @Output() result = new EventEmitter<number>();

  increment() {
    this.count++;
    this.result.emit(this.count);
  }
}

子html部分

<div>
  <p>Count: {{ count }}</p>
  <button (click)="increment()">Increment</button>
</div>

父组件

import { Component } from '@angular/core';

@Component({
  selector: 'rio-app',
  templateUrl: 'app/app.component.html'
})
export class AppComponent {
  num = 0;
  parentCount = 0;

  assignparentcount(val: number) {
    this.parentCount = val;
  }
}

父 html 部分

<div>
  Parent Num: {{ num }}<br>
  Parent Count: {{ parentCount }}
  <rio-counter [count]="num" (result)="assignparentcount($event)">
  </rio-counter>
</div>

【讨论】：

【解决方案4】：

子组件不应更新父组件的属性。而是让子级发出事件，而父级更改属性。该文档在Component Interaction section 中有一个示例。

【讨论】：

【解决方案5】：

在您的子组件中，在构造函数中传递父组件：

  constructor(
    private parent: ParentComponent,
    ...
  )

  ngAfterViewInit() {
    console.log(this.parent);
  }

【讨论】：

感谢 Tukkan，但我需要访问父 DOM 元素而不是组件，我想我提出的问题是错误的。