When I am creating routes to my detail page it only works when I do '/test' for example, when I do '/test/:id' or /test/test it cant find the page. Does anyone have any clue why?

The routes:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomepageComponent } from './pages/homepage/homepage.component';
import { LandingComponent } from './pages/landing/landing.component';
import { LoginComponent } from "./pages/account/login/login.component";
import { NotificationsComponent } from "./pages/notifications/notifications.component";
import { SettingsComponent } from './pages/settings/settings.component';
import { RegistrationComponent } from './pages/account/registration/registration.component';
import { CommunityListComponent } from './pages/community/community-list/community-list.component';
import { CommunityDetailComponent } from './pages/community-detail/community-detail.component';

const routes: Routes = [
  { path: '', pathMatch: 'full', component: LandingComponent },
  { path: 'login', pathMatch: 'full', component: LoginComponent },
  { path: 'notifications', pathMatch: 'full', component: NotificationsComponent },
  { path: 'home', pathMatch: 'full', component: HomepageComponent },
  { path: 'settings', pathMatch: 'full', component: SettingsComponent },
  { path: 'registration', pathMatch: 'full', component: RegistrationComponent },
  { path: 'test', component: CommunityDetailComponent},
  { path: 'community', pathMatch: 'full', component: CommunityListComponent},

];

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

And my component.ts (The 1 is a hard coded ID):

import { ThisReceiver } from '@angular/compiler';
import { Component, Input } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { Community } from '../../models/domain/Community';
import { CommunityService } from '../../services/API/community.service';

@Component({
  selector: 'app-community-detail',
  templateUrl: './community-detail.component.html',
  styleUrls: ['./community-detail.component.scss']
})
export class CommunityDetailComponent {
  array = [1];
  community!: Community;
  subscription!: Subscription;
  
  communityId! : string;

  constructor(private communityService: CommunityService, private router: ActivatedRoute) {
    
  }
  ngOnInit(): void {
    // this.router.queryParams.subscribe(params => {
    //   this.communityId= params['id'];
    // });
    this.getCommunities();
  }
  private getCommunities() {
    this.subscription = this.communityService.get(1).subscribe({

      next: (v) => {
        this.community = v;
      },
      error: (e) => console.log("Error when Getting all communities"),
      complete: () => console.log('getting al communites complete (ui)'),
    });
  }
}

I tried every possible route variantion I know and I looked at it with my group. It has to show the detail page with the loaded data. When it gets on the page it loads the data but when I add an ID for example it cant find it

CodePudding user response：

You need to add one more route, something like this:

{ path: 'test/:id', component: CommunityDetailComponent}

and then in your CommunityDetailComponent subscribe to active route:

this.activeRoute.paramMap.subscribe(params => { 
    const yourTestID = params.get('id') 
}

CodePudding user response：

you'll need to add /:id in your test route to indicate that you're expecting a route parameter called id.

const routes: Routes = [
   { path: '', pathMatch: 'full', component: LandingComponent },
   { path: 'login', pathMatch: 'full', component: LoginComponent },
   { path: 'notifications', pathMatch: 'full', component: 
     NotificationsComponent },
   { path: 'home', pathMatch: 'full', component: HomepageComponent },
   { path: 'settings', pathMatch: 'full', component: SettingsComponent },
   { path: 'registration', pathMatch: 'full', component: 
     RegistrationComponent },
   { path: 'test/:id', component: CommunityDetailComponent },
   { path: 'community', pathMatch: 'full', component: 
     CommunityListComponent },
  ];

Update your routes array as above,

Now you will get id in your component ngOnInit life ciycle hook by using ActivatedRoute service.

ngOnInit(): void {
    this.router.params.subscribe(params => {
       this.communityId= params['id'];
       this.getCommunities();
    });
}

private getCommunities() {
    this.subscription = this.communityService.get(this.communityId).subscribe({
      next: (v) => {
        this.community = v;
      },
      error: (e) => console.log("Error when Getting all communities"),
      complete: () => console.log('getting al communites complete (ui)'),
    });
 }

Hope it solve your issue.