Angular 2路由，如何在URL中获取语言参数

17 浏览
0 Comments

Angular 2路由，如何在URL中获取语言参数

我正在开发一个应用程序，其中第一个URL段表示界面的语言，如下所示：

/en/customer/3
/en/shop

我的路由器设置如下：

{ path: ':lang/customers/:id', component: CustomerComponent },
{ path: ':lang/shop', component: ShopComponent },

我想在启动的AppComponent或翻译服务中使用URL中的语言参数（在此示例中为lang = 'en'）。我可以在ShopComponent和CustomerComponent中访问这个参数，但在代码的其他地方无法访问。当我在AppComponent中输入以下内容时：

constructor(private activatedRoute: ActivatedRoute, private router : Router) {
}
ngOnInit() {
  this.router.routerState.root.params.subscribe((params: Params) => {
    console.log('params: ',params);
  }
  this.activatedRoute.params.subscribe((params: Params) => {
    console.log('params: ',params);
  }
}

我得到两个空对象。而且URL参数仍然为空。

我做错了什么？也许更重要的是，显然我对路由器有一些概念上的理解问题，但我在文档或其他地方找不到任何有用的信息。

谢谢你的帮助！

0

3 答案

0 Comments

问题的出现原因是在使用Angular 2的路由时，无法获取URL中的语言参数。作者尝试了使用`routerState.root.params`来获取参数，但是返回的是一个空对象。另外，作者还表示无论尝试什么方法，结果都是一样的，`routerState.root`都是一个空的路由对象。

解决方法是在构造函数中使用`router.events`来订阅`NavigationEnd`事件，并在事件触发时打印出`routerState.root.params['lang']`来获取语言参数。这个方法可以在服务和组件中都可以使用。

下面是解决方法的完整代码：

constructor(router:Router) {
  router.events.filter(e => e instanceof NavigationEnd).subscribe(e => {
    console.log('lang', router.routerState.root.params['lang']);
  });
}

通过使用上述代码，可以在路由事件触发时获取到URL中的语言参数。

0
0 Comments

问题出现的原因是作者想要从URL中获取语言参数，但不知道在哪里调用setLang()方法。作者不想在每个组件中设置语言，因为这样需要在每个组件中都进行设置。作者目前唯一能够访问URL的地方是在AppComponent中。

解决方法是在AppComponent的ngOnInit()方法中订阅路由事件，并从参数中获取语言参数。在AppComponent中，可以调用setLang()方法来设置语言。

具体代码如下：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
@Component({
  selector: 'my-app',
  template: ``,
  styles: []
})
export class AppComponent implements OnInit, OnDestroy {
  private subscription: Subscription;
  chosenLang: string = "";
  constructor(private activatedRoute: ActivatedRoute) { }
  ngOnInit() {
    // subscribe to router event
    this.subscription = this.activatedRoute.params.subscribe(
      (param: any) => {
        let language = param['lang'];
        this.chosenLang = language; // Access to the lang
        this.setLang(); // Call setLang() method
      });
  }
  ngOnDestroy() {
    // prevent memory leak by unsubscribing
    this.subscription.unsubscribe();
  }
  setLang() {
    // Your logic to set the language
  }
}

在AppComponent中，通过订阅路由事件，可以在参数中获取语言参数。然后，可以在获取到语言参数后调用setLang()方法来设置语言。

0
0 Comments

Angular 2 路由，如何在URL中访问语言参数？

在这个问题中，原帖提到了使用Angular 2的路由时如何获取URL中的语言参数。原帖中的用户试图回答自己的问题，并认为没有简单的方法来实现他最初的想法。原帖中还提到了重新定义路由的解决方法，并给出了相应的代码示例。

原帖中的用户最初的路由设置如下：

{ path: ':lang/customers/:id', component: CustomerComponent }

这个设置将整个路径都附加到CustomerComponent上，使得lang和id参数都可以在该组件中使用。从这个角度来看，就可以理解为什么在CustomerComponent之外无法访问这些参数。

原帖中的用户最终的解决方法是重新定义路由，并创建了一个LanguageComponent作为一个路由组件。这个组件用于存储语言参数，并将其存储在全局可用的TranslateService中。这样做的好处是可以在整个应用程序中共享语言参数。

原帖中还提到了一个问题，即在所有组件中链接必须是相对路径，可能会变得非常混乱。用户建议考虑通过编程方式设置基本href来解决这个问题。

原帖中还有其他用户提到了一些解决方法，包括使用Guard和订阅器。他们也提到了使用更新版本的Angular来根据语言来操作URL的方法。

总结起来，原帖中提到了在Angular 2中如何获取URL中的语言参数的问题，并给出了一种解决方法。这个解决方法包括重新定义路由，并创建一个LanguageComponent来存储语言参数。此外，还提到了一些其他的解决方法和问题。

0