2 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 부분

시도 부모 값을 변경

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