Детский компонент и NgIf Angular 6

Question

Я новичок в Angular 6, поэтому у меня есть эта проблема: У меня есть родительский компонент со списком поездок, я хочу нажать на одну из них и отобразить карту Google с местоположением этой поездки. Это мой родительский компонент:

<div class="card ml-3 mt-3 mr-3">
    <h5 class="card-header text-white bg-info">Viajes Activos</h5>
     <div class="card-body">
         <app-trips-table [hidden]="!showTrips" (selectTrip)="selectTrip($event)"> 
        </app-trips-table>
        <app-positions *ngIf="!showTrips"></app-positions>
     </div>
</div>

selectTrip(id) {
    this.showTrips = false;  
    this.positionsComponent.putPosition(id);
  }

Моя идея заключается в том, что, когда пользователь щелкает в поездке из моего родительского компонента, показывает компонент позиций и вызывает метод через Viewchild, чтобы установить позицию поездки и инициализировать карты Google, но если я делаю это, я получаю ошибку, потому что дочерний компонент не определен.

Я надеюсь, что вы мне поможете.

Answer 1

Насколько я понимаю, это ваш дочерний вид, который содержит список из нескольких позиций.

Вы можете использовать для этого @Output из вашего дочернего компонента и использовать привязку событий к родительскому компоненту

// CHILD COMPONENT

export class PositionComponent {
  @Output() onPositionSelect: EventEmitter = new EventEmitter();

  onSelect(i) {
   this.onPositionSelect.emit(i);
  }
}

// PARENT COMPONENT

<app-positions (onPositionSelect)="selectedPosition($event)"></app-positions>

export class ParentComponent {
   selectedPosition(i) {
     console.dir(i);
   }
}

Answer 2

Если вы хотите достичь этого минимума, то @ViewChild сначала вам нужно определить переменную, на которую вы ссылаетесь, в своем шаблоне

 <app-positions *ngIf="!showTrips" #position></app-positions>

тогда, когда вам нужно получить экземпляр вашего компонента

@ViewChild('position') positionsComponent: PositionsComponent;

и после этого вы можете писать код, как вы.

То же самое можно сказать о каком-то лучшем решении с функциональностью @Input. Надеюсь, это поможет.