角7获取ActivatedRoute参数不起作用 [英] angular 7 getting ActivatedRoute params not working

问题描述

您好，感谢您的提前帮助.

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.

单击routerLink时不会触发.

It doesn't fire when the routerLink is clicked.

所以我有以下内容: 关于stackblitz的问题

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 { }

感谢内特

推荐答案

尝试通过以下方式访问该参数，而不是从paramMap可观察流的解析值而不是快照中访问该参数:

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

如果出于样式目的需要，可以始终将可观察到的流ParamMap值传递给helper函数.

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

希望有帮助！

这篇关于角7获取ActivatedRoute参数不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！