角度 7 获取 ActivatedRoute 参数不起作用

Question

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

我一直在研究这个问题一段时间，但还没有弄清楚。

我想要做的是访问参数并显示页面上选择的内容。

当 routerLink 被点击时它不会触发。

所以我有以下内容： question on stackblitz

我似乎无法让它工作。

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

谢谢内特

Answer 1

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

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

这实际上是官方documentation 描述使用参数的方式

如果您需要样式目的，您始终可以将可观察流 ParamMap 值传递给辅助函数

希望对您有所帮助！