angular 7 getting ActivatedRoute params not working

吃可爱长大的小学妹 提交于 2020-08-24 07:41:45

问题


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


回答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!



来源:https://stackoverflow.com/questions/54139036/angular-7-getting-activatedroute-params-not-working

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!