Angular 2 Activatedroute参数在Service或外部< router-outlet>中不起作用 [英] Angular 2 Activatedroute params not working in Service or outside <router-outlet>

问题描述

我有一个非常奇怪的问题：
index.html

I have a very strange problem: index.html

<navigation-menu *ngIf="isLoggedIn"></navigation-menu>
<div class="content-wrapper" [ngClass]="{'fullContent' : !isLoggedIn}">
    <section class="content">
        <router-outlet></router-outlet>            
    </section>
</div>

导航菜单是导航菜单的组件。
在路由器出口的内容中有一个称为资产的组件。

The navigation-menu is a component for the nav menu. In router-outlet content there is a component called "assets".

我在资产部分所做的工作：

What I did in asset component:

import { ActivatedRoute}from "@angular/router";
constructor(private route: ActivatedRoute){}
public ngOnInit(): void {
    this.route.params.subscribe(params => {
        const id = params["id"];
}

这可行，我得到了我的路线参数（

This works and I get the parameters of my route (which is kind of "asset/:id).

现在，我在导航菜单组件（位于路由器出口外部）中尝试了相同的操作全局服务称为contextservice。
与上面的代码相同，但是它甚至没有在路由更改时触发。如果我​​尝试获取当前的路由器快照

Now I tried the same in my Navigation-Menu Component (which is "outside" the router outlet) and in a global service called contextservice. Same code as above, but it is not even triggered on route change. If I try to get a current router snapshot

  const strId = this.route.snapshot.params["id"];

NavigationEnd事件被触发后，结果是一样的：strId未定义，因为参数是一个空对象。

after NavigationEnd event was triggered it is the same result: strId is undefined because params are an empty object.

仅在我的资产组件中有效。

It only works in my asset component. Is this working as intended or how should this be handled?

我的意图是触发来自全局服务的事件（或 globa事件） l组件（如导航菜单）正在侦听所有路线（参数）更改。

My intension was to trigger an event from a global service (or a "global" component like the nav menu) which is listening to all route(-params) changes.

我唯一的解决方案是在每个NavigationEnd事件之后解析完整的url，我认为这是不正确的方法...或者处理每个子组件中的参数更改（在路由器出口中）本身。

My only solution would be to parse the complete url after every NavigationEnd event which in my opinion is no proper way...Or to handle the params change in each child component (in router-outlet) itself.

也许我在理解上只是一个基本错误...

Maybe I have just a basic error in understanding...

谢谢

解决方案：

this.router.events.subscribe(val => {
        if (val instanceof RoutesRecognized) {
            var strId = val.state.root.firstChild.params["id"];
        }});

别忘了导入由角路由器识别的路由！

Don't forget to import RoutesRecognized from angular router!!

推荐答案

由路由器添加的组件获得通过的路由器网段（ ActivatedRoute ），但在服务中有没有激活的路线。您可以订阅router.events并遍历路由树（router.firstChild ...`），以从所需的特定路由序列中获取参数。

The component added by the router gets the router segment (ActivatedRoute) passed, but in a service there is no activated route. You can subscribe to router.events and traverse the routes tree (router.firstChild...`) to get params out of a specific route sequement you need.

另请参见 https://github.com/angular/angular/issues/11023

这篇关于Angular 2 Activatedroute参数在Service或外部< router-outlet>中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！