使用 FAB 启动导航器

launch navigator with a FAB

看到这个的人你好,我是 typescript 开发的初学者,所以我尽我最大的努力,我正在尝试使用 FAB 启动导航器(如 waze、gmap 或其他...)。这是我在 TS 中的代码:

ngOnInit() {
        this.adresseService.getAdresse(lieu.adresse.id).subscribe(adresse => {
            lieu.adresse = adresse;
          });
      });
  this.lieux = lieux;
 });
}

ionViewDidEnter() {
this.lieuId = this.route.snapshot.params['id'];
if (this.lieuId)  {
  this.loadLieuWithMap();
}
console.log('ionViewDidEnter');
}

async loadLieu() {

this.lieuService.getLieu(this.lieuId).subscribe(res => {

  this.lieu = res;
  this.concertService.getUpcomingConcertsForLieuById(this.lieuId)
  .subscribe(interne_next_concert => this.lieu.prochaine_concerts = this.getConcertsReadyToExpose( interne_next_concert));
  this.concertService.getPreviousConcertsForLieuById(this.lieuId)
  .subscribe(interne_previous_concert => this.lieu.concerts_passes = this.getConcertsReadyToExpose( interne_previous_concert));

  this.adresseService.getAdresse(res.adresse.id).subscribe(resadd => {
    this.lieu.adresse = resadd;
    console.log(this.lieu);
  });
});
}

 async loadLieuWithMap() {

this.lieuService.getLieu(this.lieuId).subscribe(lieu => {
  // loading address
  this.adresseService.getAdresse(lieu.adresse.id).subscribe(adresse => {
    this.adresse = adresse;
    this.map = L.map('mapIdDetail').setView([adresse.latitude, adresse.longitude], 13)  ;
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '© <a href="http://www.openstreetmap.org/copyright',
              }).addTo(this.map);
              // get full address
    const adresseComp = adresse.numero + ' ' + adresse.rue + '<br>' + adresse.ville + ' ' + adresse.cp;
              // popup Content 
    const popupContent = '<h2>' + lieu.nom + '</a></h2></br>' + adresseComp + '</div>';
    L.marker([adresse.latitude, adresse.longitude]).addTo(this.map)
              .bindPopup(popupContent);
        });
  this.lieu = lieu;
  });
}

LaunchRoute() {
console.log('ADRESSE:', );
this.launchNavigator.navigate()
.then(
  success => console.log('Launched navigator'),
  error => console.log('Error launching navigator', error)
 );
}

和 HTML 部分是:

    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button color="primary" (click)="LaunchRoute()" >J'y vais</ion-fab-button>
    </ion-fab>

问题是如果不将信息(号码、街道、城市...等)放在按钮中间,我就无法发送它,如下所示:

    <ion-fab-button color="primary" (click)="LaunchRoute()" >{{Lieu.nom}}</ion-fab-button>

它不是很好,但是当我这样做时它当然工作得很好。 所以我认为我的 LaunchRoute 不好,也许我错过了一些我不知道的东西。

抱歉我的英语写作能力(以及部分法语代码)。 [编辑]

嗯,在咨询了其他几个论坛后终于解封了,终于找到了解决办法。 在我的 TS 文件中:

LaunchRoute(adresse) {
  console.log('ADRESSE:', adresse);
  this.launchNavigator.navigate(adresse)
  .then(
    success => console.log('Launched navigator'),
    error => console.log('Error launching navigator', adresse, error)
  );
}

并在 html 文件中:

    <ion-fab vertical="bottom" horizontal="end">
    <ion-fab-button vertical="bottom" horizontal="end" color="primary" (click)="LaunchRoute([ lieu.nom, adresse.numero, adresse.rue, adresse.ville])" ><img src="../../assets/img/navto.png" /></ion-fab-button>
    </ion-fab>