Can not getting parameters from routing URL

Ionic Framework
1

I am doing a todo-list using ionic4 and firebase, I hope I can get lists’ id in my detail page, so when people click list on the home page they could check the detail.

I use ionic4 and firebase, in windows.

this is my routing.ts:

 ....
 { path: 'homepage', loadChildren: './pages/Homepage/homepage.module#HpagePageModule' },
 ....
   path: 'list-detail/:id',
   loadChildren: 
'./pages/list-detail/listdetail.module#ListDetailPageModule',
   canActivate: [AuthGuard]
 ....
];

and here is my list-detail.ts:

import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-list-detail',
  templateUrl: './list-detail.page.html',
  styleUrls: ['./list-detail.page.scss'],
})
export class ListDetailPage implements OnInit {
  public listId :string;
  public currentList: any = {}; 

  constructor(
    private listService:ListService,
    private route:ActivatedRoute,
    ) { }

  ngOnInit() {

    this.listId = this.route.snapshot.paramMap.get('id');

    this.listService
    .getlistDetail(this.listId)
    .get()
    .then(listSnapshot => {
      this.currentList = listSnapshot.data();
      this.currentList.id = listSnapshot.id;
  });
}
}

Meanwhile, here is my homepage.html:


  <ion-list>
    <ion-list-header><ion-label>Your Lists</ion-label></ion-list-header>
    <ion-item
      tappable
      *ngFor="let li of list"
      routerLink="/list-detail/{{ list.id }}"
    >
      <ion-label>
        <h2>{{li?.name}}</h2>
        <p>Attribution: <strong>{{li?.attribution}}</strong></p>
      </ion-label>
    </ion-item>
  </ion-list>
   ....

</ion-cotent>

The thing is that when I clicked the list on my page, it occurred “core.js:9110 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ‘list-detail’”, when I replaced routerLink in the homepage, it works but obviously no parameters in the detail page. What’s wrong with my routing.ts? I found other people also defined URL in this way. Thanks a lot!

2

The thing that jumps out at me is this line in homepage.html:

*ngFor="let li of list" routerLink="/list-detail/{{ list.id }}"

Is there a chance that last list wants to be li instead?

1 Like
3

Yea it’s the problem, so stupid haha thx dude.