angular how get param from url-CodePudding

i want to develop a single page with angular with the url http://localhost:4200/popup/{param}

i will expose this page to my client,for example the client has a button on his app (the app of the client is not an angular app), when he clicks on it, it opens the page with the url http://host/popup/44444444 (the 44444444 is a dynamic param it changes when the client clicks on the button)

so the problem is, how can i get the param in my app ?

i changed the base href <base href="/popup" />, so the default url changed to http://localhost:4200/popup/

when i tried to add manually the param in the url i get this error

Cannot match any routes. URL Segment: '4444444444'

export const routes: Routes = [
  {
      path: '',
      redirectTo: 'popup/:requestNumber',
      pathMatch: 'full',
  },
  {
      path: 'popup/:requestNumber',
      component: AppComponent
  },
];

CodePudding user response：

constructor(private activatedRoute: ActivatedRoute)

ngOnInit(): void {
   const requestNumber = this.activatedRoute.snapshot.paramMap.get('requestNumber'))
}

CodePudding user response：

Simply remove popup from the routes. You don't need to specify that since is defined in the base. I guess you don't need the redirect to popup because this is done by default since you change the base.

export const routes: Routes = [
  {
      path: ':requestNumber',
      component: AppComponent
  },
];

Try with this. After that you could retrieve that url param with the ActivatedRoute service.

CodePudding user response：

You can get url params using ActivatedRoute interface

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-lesson-overview',
  templateUrl: './component.component.html',
  styleUrls: ['./component.component.scss'],
})
export class Component implements OnInit {
  paramValue: string
  constructor(
    private activatedRoute: ActivatedRoute
  ) {
   paramValue  = "";
  }

  ngOnInit(): void {
   paramValue = this.activatedRoute.snapshot.paramMap.get('paramName'))
  }
}

In a Single Page App instead of using href you should use routerLink. To be able to use the routerLink in your HTML as a directive you should import RouterModule in the AppModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now you can use it like this <base routerlink="/popup" /> There is also the routerLinkActive that applies a css style to the active link <base routerlink="/popup" routerLinkActive="active" /> where active is a css class.

For more info about why you should use routerlink instead of href you can check this thread