前一天我們撰寫了

透過畫面自己選擇經緯度來標記Google map

今天來學習一下如何將Google Map Component嵌入其他component並透過@input與@output來傳遞參數

首先先在Google Map Component中
多加上這幾個參數

  @Input() width: string; //地圖寬度
  @Input() latit: string; //緯度
  @Input() longit: string;//經度
  @Output() childEvent = new EventEmitter<any>(); 
  // 提供Output裝飾器，讓該事件成為父親模板的事件

接著在ngOnInit()多一點新增

 ngOnInit() {
    this.width = (this.width == null) ? '80%' : this.width; 
    this.latit = (this.latit == null) ? '23.58' : this.latit;
    this.longit = (this.longit == null) ? '120.58' : this.longit;
    this.gmap.latit = this.latit;
    this.gmap.longit = this.longit;
    this.gmap.language = 'zh-TW'; 
    this.gmap.scale = '12';
    this.gmap.mode = '';
    this.getGmapURL();
  }

為了讓Google Map這個子component可以回傳值Output
我們定義一個onChildClick()

  onChildClick() {
  const nowTime = new Date();
  this.childEvent.emit(nowTime);
}

完成了以後，立馬到父component進行呼叫

<div>
<mat-form-field>
  <mat-select [(ngModel)]="selectedData" (ngModelChange)="getUikeDataStation(selectedData)" placeholder="請選擇一個場站">
    <mat-option *ngFor="let u of uBike " [value]="u">
      {{u.sno}} {{u.sna}}
    </mat-option>
  </mat-select>
</mat-form-field>
</div>
時間 => <span style='color:red'> {{ strFormChild | date : 'yyyy-MM-dd hh:mm:ss' }}</span>
<div *ngFor="
  let i of uBikeOneSelected">
{{i.sna}}-
總停車格：{{i.tot}}
可借車位數：{{i.sbi}}
資料更新時間：{{i.mday}}
<app-tri002 [width]="'80%'" [latit]="i.lat" [longit]='i.lng' (childEvent)="onListenChild($event);"></app-tri002>
</div>