J'ai besoin d'accéder à certaines propriétés de l'élément DOM parent qui contient le composant d'où je veux obtenir les informations. Y a-t-il un moyen de faire une telle chose?
Voici à quoi ressemble mon composant:
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;
}
constructor(elementRef:ElementRef) {
elementRef.nativeElement.parentElement....
}
Dans votre composant enfant, passez le parent au constructeur:
constructor(
private parent: ParentComponent,
...
)
ngAfterViewInit() {
console.log(this.parent);
}
Le composant enfant ne doit pas mettre à jour les propriétés sur le parent. Demandez plutôt à l'enfant d'émettre des événements et au parent de modifier les propriétés. Les documents ont un exemple dans la section Interaction entre composants .
pour accéder aux valeurs de parent, vous pouvez utiliser @input. pour changer les valeurs parent essayez cet exemple
composant enfant
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);
}
}
partie html enfant
<div>
<p>Count: {{ count }}</p>
<button (click)="increment()">Increment</button>
</div>
composant parent
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;
}
}
partie HTML parent
<div>
Parent Num: {{ num }}<br>
Parent Count: {{ parentCount }}
<rio-counter [count]="num" (result)="assignparentcount($event)">
</rio-counter>
</div>