关于 Angular：从 url 在页面之间传递数据


Passing Data between pages from url

我正在从事 ionic 4 项目。我的项目是使用输入搜索从 url 获取数据 json。我希望在用户单击任何项??目时传递数据以向他们显示另一个页面以获取更多详细信息。我尝试使用此代码，但我得到未定义的值！

这段代码正在执行搜索操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
export class FlightsearchPage {
  public search = ''
  public flight : any
  filterItems:any;
  callsign : any;
  constructor(private http: HTTP, public loadingController: LoadingController, private nav : NavController) {

    this.addThemFunction
  }

  keyPressed(event: any) { /
    console.log(event.target.value);
  this.addThemFunction(event.target.value);
  }

 async addThemFunction(search){

  this.http.get('/web/find?query='+search+'', {}, {})
  .then(data => {

    const parsed = JSON.parse(data.data);
    this.flight = parsed.results;
    this.filterItems= this.flight;
    this.callsign = this.flight.detail.flight

    /// here l am try to pass value callsign to page details ///

    this.nav.navigateForward(`/flightserachdetails/${this.callsign}`)

    }), err=>{
    }
  }


    }

详情搜索

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 <ion-content padding>
      <ion-item>
          <ion-label position="floating">Enter your flight number</ion-label>
          <ion-input [(ngModel)]="search" (keyup)="keyPressed($event)" placeholder="Ex : iaw556"></ion-input>
        </ion-item>

  <ion-item *ngFor="let item of flight"  routerDirection="forward">
      <ion-label>
        <ion-text color="primary">
            <h3 [routerLink]="['/flightserachdetails', id]">{{item.label}}
          </ion-text>
          <p>{{item.name}}</p>
      </ion-label>
    </ion-item>

</ion-content>

这段代码正在从上面的代码中获取数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export class FlightserachdetailsPage {

  public flight : any
  callsignId = null

  constructor(private http: HTTP, public loadingController: LoadingController, private nav: NavController,private activatedRoute: ActivatedRoute) {


    this.callsignId = this.activatedRoute.snapshot.paramMap.get('id')          





}

用于显示来自上面另一个页面的数据。

1
2
3
4
<ion-content padding>
   {{callsignId}}
   {{flight.request.fetchBy}}
</ion-content>

json 响应

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
 "results": [
    {
     "id":"IA107",
     "label":"IA107",
     "detail": {
       "callsign":"IAW107",
       "flight":"IA107",
      "fetchBy":"IA107"
      },
     "type":"schedule",
    }
  ]
}

我很抱歉混乱代码。请给我任何建议或给我另一个代码示例？

相关讨论

您正在同时进行查询和导航，因此请从 addThemFunction(search) 中删除它。

1
2
3
4
5
6
7
8
9
10
11
12
13
async addThemFunction(search){

    this.http.get('/web/find?query='+search+'', {}, {})
       .then(data => {

          const parsed = JSON.parse(data.data);
          this.flight = parsed.results;
          this.filterItems= this.flight[0];
          this.callsign = this.flight.detail.flight

        }
     }
}

您需要从 addThemFunction(search) 函数中删除导航并创建一个新的导航以在单击项目时进行导航。

1
2
3
navigate(id){
    this.nav.navigateForward(`/flightserachdetails/${id}`);
}

并从 h3 中删除 routerLink 并在单击项目时调用 navigate() 函数并在该函数中传递 id。

1
2
3
4
5
6
7
8
<ion-item *ngFor="let item of flight"  routerDirection="forward">
  <ion-label>
    <ion-text color="primary">
        <h3 (click)="navigate(item.id)">{{item.label}}
      </ion-text>
      <p>{{item.name}}</p>
  </ion-label>
</ion-item>

传递完整的对象：

1
`this.router.navigate(['flightserachdetails'], item);

在下一页：

1
2
3
4
constructor(private activatedRoute: ActivatedRoute) {
   this.activatedRoute.queryParams.subscribe(resp => {
       console.log(resp);
   });

相关讨论