angular 7 getting ActivatedRoute params not working

Question

Hi and thank you for your help in advance.

I have been working on this problem for awhile now and have not been able to figure it out yet.

What I want to do is to access the params and display what is selected on the page.

It doesn't fire when the routerLink is clicked.

so I have the following: question on stackblitz

I can't seem to get it to work.

layout.component.ts

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

@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.scss']
})
export class LayoutComponent implements OnInit {

  currentUrl: string;
  currentLang: string;

  constructor( private route: ActivatedRoute) {
  }

  gettLang(): void {
    console.log(this.route.snapshot.paramMap.get('lang'));
    this.currentLang = this.route.snapshot.paramMap.get('lang');
  }

  ngOnInit() {
    this.gettLang();
    this.route.paramMap.subscribe(
      () => this.gettLang()
     );
  }

}

layout.component.html

<a [routerLink]="[ 'beam/comic', 'de',1,'home', 1 ]">name de</a><br>
<a [routerLink]="[ 'beam/comic', 'en',1,'home', 1 ]">name en</a><br>
<a [routerLink]="[ 'beam/comic', 'sp',1,'home', 1 ]">name sp</a><br>
--- {{ currentUrl }} --- <br>
{{ currentLang }}---

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LayoutComponent } from './layout/layout.component';

const routes: Routes = [
  {
    path: 'beam/comic/:lang/:ep/:title/:page',
    component: LayoutComponent
  },
  {
    path: '*',
    redirectTo: 'beam/comic/en/1/home/1',
    pathMatch: 'full'
  },
];

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

app.component.html

<app-layout></app-layout>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'beam';
}

app.module.ts

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

import {HttpClientModule} from '@angular/common/http';

import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatNativeDateModule} from '@angular/material';
import {AllMaterialModule} from './material/material.module';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';


import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavBoxComponent } from './nav-box/nav-box.component';
import { ImageBoxComponent } from './image-box/image-box.component';
import { LayoutComponent } from './layout/layout.component';
import { LanguageListComponent } from './nav-box/language-list/language-list.component';
import { EpisodeListComponent } from './nav-box/episode-list/episode-list.component';

@NgModule({
  declarations: [
    AppComponent,
    NavBoxComponent,
    ImageBoxComponent,
    LayoutComponent,
    LanguageListComponent,
    EpisodeListComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    AllMaterialModule,
    MatNativeDateModule,
    ReactiveFormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Thanks Nate

Answer 1

Try accessing the param in the following way instead by accessing this param from the resolved value of the paramMap observable stream rather than the snapshot:

ngOnInit() {
  this.route.paramMap.subscribe(
    (params: ParamMap) => {
      this.currentLang = params.get('lang');
    }
  )
}

This is effectively how the official documentation describes working with params

You could always pass the observable stream ParamMap value to the helper function if you wanted for style purposes

Hopefully that helps!