Pass / Display параметр в модальном, Angular2 - PullRequest
Новая
       24

Pass / Display параметр в модальном, Angular2

0 голосов
/ 14 мая 2018

В моем приложении Angular5 есть component.hmtl, в котором есть функция markerClick, открывающая модальное окно. В модальном режиме я хочу отобразить параметр item.lat, который я посылаю в функцию markerClick, но не могу это сделать, и мне нужна ваша помощь.

сначала код component.ts, а затем код component.html ниже. 

open(content, latTmp) {
  this.modalService.open(content, latTmp).result.then((result) => {
    this.closeResult = `Closed with: ${result}`;
  }, (reason) => {
    this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
  });
  console.log(latTmp);
}
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>


  <agm-map [latitude]=57.107118 [longitude]=12.2520907 [zoom]="4">

    <ng-container *ngFor="let item of station">
      <agm-marker [latitude]="item.Lat" [longitude]="item.Lng" (markerClick)="open(content, item.Lat)">
      </agm-marker>
    </ng-container>

  </agm-map>
  <!-- </ng-container> -->
  <!-- <img width="100%" height="400" alt="World Map" src="assets\images\SyntronicWorldMap.gif"> -->
</div>





<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Station Info</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>Test Hardware 1, sätt behörighet&hellip;</p>
    <p>Test Hardware 2&hellip;</p>
    **HERE I WANT TO DISPLAY ITEM.LAT PARAMETER SENT FROM THE MARKERCLICK FUNCTION!!!!!**

  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
  </div>
</ng-template>

1 Ответ

0 голосов
/ 14 мая 2018

Если вы используете MatDialog ==> Передача данных в модал, используя этот способ ** abcComponent.ts ==> 

   const dialogRef = this.dialog.open(MyModalComponent, {
      data: { Content:this.content, LatTmp:this.latTmp }
   });

теперь получают эти данные в ** MyModalComponent.ts ==> 

  constructor(
    public dialogRef: MatDialogRef<MyModalComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any  ) { }

  ngOnInit(){
     var receiveContent = this.data.Content;
     var receiveLatTmp = this.data.latTmp;
     console.log(receiveContent,receiveLatTmp)
  }
...