Wie kann auf Daten von einer untergeordneten Komponente zugegriffen werden? Angular2

Question

Ich habe Komponente erstellt namens app-inline-edit und es soll wie folgt verwendet werden:

<app-inline-edit (onSave)="saveEditCheck($event)"> 
    <app-select formControlName="CurrentCar" [options]="carOptions"></app-select> 
</app-inline-edit> 

standardmäßig es Wert unter „CurrentCar“ als einfacher String mit Bleistift-Symbol daneben zeigen sollte. Wenn ein Benutzer auf eine Zeichenfolge oder ein Symbol klickt, sollte die Komponente "app-select" mit zwei Symbolen dargestellt werden: eine zum Speichern von Änderungen, die andere zum Verwerfen von Änderungen.

EDIT: Kind von app-inline-edit ist nicht immer die app-select, es kann auch andere Komponente sein. Diese Vorlage habe ich:

<div> 
    <div *ngIf="editing"> 
    <div #inlineEditControl class="inline-edit-input"> 
     <ng-content></ng-content> 
    </div> 
    <i class="fa fa-check" aria-hidden="true" (click)="save()"></i> 
    <i class="fa fa-times" aria-hidden="true" (click)="discard()"></i> 
    </div> 
    <div *ngIf="!editing"> 
    <div title="Click to edit" (focus)="edit(value);" tabindex="0" class="inline-edit"> 
     {{value}}&nbsp;<i class="fa fa-pencil" aria-hidden="true" (click)="edit(value)"></i> 
    </div> 
    </div> 
</div> 

Ich habe versucht, darauf zuzugreifen über

@ViewChild('inlineEditControl') inlineEditControl: ElementRef; 

Aber wenn editingfalse ist inlineEditControl ist undefined. Das Problem, auf das ich gestoßen bin, ist. Wie kann ich auf den ausgewählten Wert (CurrentCar) zugreifen, der an "app-select" angehängt ist, wenn die Auswahl standardmäßig nicht angezeigt wird? Ist es überhaupt möglich?

Answer 1

Sie @ViewChild an, die in Ihrer Komponente

verwenden sollten

@ViewChild<AppSelectComponent> appSelectComponent: AppSelectComponent; 

this.appSelectComponent.options /////////////// have it here 


<app-select formControlName="CurrentCar" [options]="carOptions"></app-select>