どのようにangle2コンポーネントの親DOM要素参照を取得する

Question

私は情報を取得したい場所からのコンポーネントを含む親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; 
    } 

Answer 1

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

Answer 2

：ここ

は私のコンポーネントがどのように見えるかです

constructor(
    private parent: ParentComponent, 
    ... 
) 

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

Answer 3

子コンポーネントが親のプロパティを更新するべきではありません。代わりに、子供がイベントを出し、親がプロパティを変更するようにします。ドキュメントにはComponent Interaction sectionの例があります。

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部分

<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部分

を試してみてください 親の値を変更します私は親のDOM要素ではなく、親コンポーネントへのアクセスを持っている必要があります

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