javascript - Getting language prefix as parameter from Angular 6 router

Question

I have an Angular (6.0.3) application and I want to use the language as a common prefix to all routes, something like /en/foo/bar. My route definition src/app/submodule/submodule.routes.ts looks like this:

export const submoduleRoutes = [
    { path: ':lingua/foo/bar', component: FooBarComponent },
];

My root component src/app/app.component.ts:

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

import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit, OnDestroy {
  title = 'app';
  private sub: any;


  constructor(private router: Router, private route: ActivatedRoute) {

    this.router.events.pipe(
      filter((event:Event) => event instanceof NavigationEnd)
    ).subscribe(x => console.log(x));
  };

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       console.log(params);
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

When I navigate to /xy/foo/bar, the FooBarComponent gets rendered. But I am not able to retrieve language prefix in the root component. The params hash is empty.

The console output first displays {} for the empty params, and then the NavigationEnd event.

The same code works as expected in the FooBarComponent. Obviously, the root component is the wrong place to get the parameters.

My goal is actually to get the lingua parameter for all components, so that I can set the correct language. I know that I could also store the language in a cookie or local storage but I need bookmarkable URLs for the multi-lingual content.

In case that matters, the source code is at https://github.com/gflohr/Lingua-Poly (commit 12608dc). The route in question is defined in https://github.com/gflohr/Lingua-Poly/blob/master/src/app/main/main.routes.ts (at the end, :lingua/mytest.

标签： javascriptangularangular-routingangular-router

Answer 1

你需要让他们成为它的孩子App.component才能工作。

例如：

const routes = [
  { path: ":lingua", component: AppComponent, loadChildren: 'app/main/main.module#MainModule' },
  { path: "", pathMatch: "full", redirectTo: "/en" }
]

这将从主模块加载所有子路由，但允许AppComponent访问lingua参数。

然后，您需要:lingua从子路线中删除该部分

这是一个 StackBlitz 示例