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地图，但是如果执行此操作，则会出现错误，因为子组件未定义。

我希望你能帮助我。

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

子组件和NgIf角6

2 个答案: