如何获取Angular2组件的父元元素参考

Question

我需要访问父元素的某些属性，该元素包含我想获取信息的组件，有没有办法执行此类操作？

这是我的组件的样子：

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

Answer 1

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

Answer 2

在您的孩子组件中通过构造函数中的parent：

  constructor(
    private parent: ParentComponent,
    ...
  )
  ngAfterViewInit() {
    console.log(this.parent);
  }

Answer 3

儿童组件不应在父上更新属性。取而代之的是让孩子发射事件，父母更改属性。文档在"组件交互"部分中有一个示例。

Answer 4

用于访问父值您可以使用@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 part

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

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

Answer 5

如果要从父组件中获取数据，则可能需要在组件之间查看数据交换方法。在我看来，您可能想看看输入装饰器。您可以做类似的事情： <app-spinner show="true"></app-spinner>或者 <app-spinner show="isBusy()"></app-spinner>

在这里查看它：https：//angular.io/guide/inputs-utputs