子組件和NgIf角6

Question

我是Angular 6的新用戶，所以我有這個問題：我有一個帶旅行清單的父組件，我想單擊其中一個並顯示帶有該旅行位置的google map。 這是我的父組件：

<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);
  }

我的想法是，當用戶從父組件中單擊行程時，顯示positions組件並通過Viewchild調用方法來設置旅程的位置並初始化google map，但是如果我這樣做，則會收到錯誤消息，因為child組件是未定義。

我希望你能幫助我。

Answer 1

如果要實現此低谷@ViewChild首先需要定義在模板中引用的變量

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

然后，當您需要獲取組件的實例時

@ViewChild('position') positionsComponent: PositionsComponent;

之后，您可以像編寫代碼一樣編寫代碼。

同樣，您可以考慮使用@Input功能更好的解決方案。 希望它會有所幫助。

Answer 2

據我了解，您的子視圖包含多個職位列表。

您可以在子組件中使用@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);
   }
}