Ionic中如何动态传递URL参数并从JSON对象获取对应内容？

Got it, let's solve this step by step. You want to map URLs like localhost:8100/link1 to show the corresponding content from your jsonData in the HomePage. Here's how you can make it work:

First, you need to set up your app's routing to accept dynamic path parameters (like link1, link2) that point to the HomePage. Open app-routing.module.ts and update the routes:

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { HomePage } from './home/home.page';

const routes: Routes = [
  // Dynamic route to match any link path
  {
    path: ':linkId',
    component: HomePage
  },
  // Optional: Redirect root path to a default link (e.g., link1)
  {
    path: '',
    redirectTo: '/link1',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Next, modify your home.ts to grab the dynamic linkId from the URL, then pull the corresponding content from your jsonData. You'll need Angular's ActivatedRoute to access route parameters:

import { Component } from '@angular/core';
import { NavController, ActivatedRoute } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage { 
  jsonData = { 
    "link1": "Content from link1", 
    "link2": "Content from link2", 
    "link3": "Content from link3" 
  };
  currentContent: string = ''; // Stores content to display

  constructor(
    public navCtrl: NavController,
    private activatedRoute: ActivatedRoute // Inject ActivatedRoute
  ) { 
    // Subscribe to route parameter changes
    this.activatedRoute.paramMap.subscribe(params => {
      const linkId = params.get('linkId');
      // Match the linkId to your jsonData, add fallback for invalid paths
      this.currentContent = this.jsonData[linkId as keyof typeof this.jsonData] || 'Oops, content not found!';
      console.log('Loaded content for:', linkId);
    });
  }
}

Finally, update home.html to render the currentContent variable:

<ion-header>
  <ion-toolbar>
    <ion-title>Content Viewer</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <h3>Your Content:</h3>
  <p class="content-text">{{ currentContent }}</p>
</ion-content>

• If you add more links later, just update the jsonData object—no need to change the routing logic.
• To handle invalid paths (like localhost:8100/link4), the fallback text we added will show up automatically.
• Test by running ionic serve and navigating to localhost:8100/link2 or localhost:8100/link3—you should see the matching content right away.

内容的提问来源于stack exchange，提问作者user2828442