web-dev-qa-db-ja.com

angular2コンポーネントの親DOM要素参照を取得する方法

情報を取得する場所からコンポーネントを含む親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;
    }
angulardomangular2-components
7
Sebastian Hernandez
constructor(elementRef:ElementRef) {
  elementRef.nativeElement.parentElement....
}
20
Günter Zöchbauer

子コンポーネントで、コンストラクターで親を渡します。

  constructor(
    private parent: ParentComponent,
    ...
  )

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

子コンポーネントは、親のプロパティを更新しないでください。代わりに、子にイベントを発生させ、親がプロパティを変更するようにします。ドキュメントの Component Interactionセクション に例があります。

1
JayChase

親の値にアクセスするには、@ 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>
0
Amit kumar