从延迟加载的路由组件中获取父路由参数

Question

我试图在延迟加载的路由组件中获取父路由参数，但是使用activatedRoute.parent.params 似乎不起作用？我有一个确实有效的 sn-p，但是它涉及使用“魔术”数组索引号来检索值....

为什么会出现这种情况？是否有一个 cleaner 方法可以让我不必检索数组值 (this.activatedRoute.pathFromRoot[1])？

---

我有以下延迟加载模块的路线：

parent.route

routes:Routes = [
    {
        path: "dashboard/:id",
        component: dashboard.DashboardComponent,
        canActivate: [guard.LoggedInGuard],
        children: [
            {
                path: "my-dock",
                loadChildren: 'path/child.module#Child'
            }
        ]
    }
];

然后在child.module 的默认组件中我有以下内容：

child.component

ngOnInit() {
    this.activatedRoute.pathFromRoot[1].params.subscribe((params: Params) => {
        console.log(params); // returns {id: "123456789"}
    });

    this.activatedRoute.parent.params.subscribe((params: Params) => {
        console.log(params);  // returns {}
    });
}

---

为什么我不能使用this.activatedRoute.parent.params 来获取id 参数？

Answer 1

您可以尝试使用paramsInheritanceStrategy。见https://angular.io/api/router/ExtraOptions

Answer 2

以下方法在 Angular-6 中运行良好（可能在 Angular-5 中，但不确定）

// method 1
this.activatedRoute.pathFromRoot[1].params.subscribe((params: Params) => {
    console.log(params);
});

// method 2    
this.activatedRoute.parent.params.subscribe((params: Params) => {
    console.log(params);
});

问。为什么我不能使用 this.activatedRoute.parent.params 获取 id 参数？

A.您没有提到您使用的 Angular 版本，但在 Angular-6 中这两种方法都有效。

Answer 3

您可以访问父路由器数据的父级。在某些项目结构中这似乎有点奇怪，但如果您知道您的路由器结构，您可以这样做。

 constructor(
    private route: ActivatedRoute

)
this.route.parent.parent.params.subscribe( (params) => {
        console.log(params);
        this.urlKey = params['urlKey'];
    });

Answer 4

在没有'magic' array index number 的情况下完成此操作的最佳方法是使用服务。

• 获取父项中的参数或 URL 并将它们放入服务中。
• 从服务的延迟加载组件中访问服务变量的参数。 像这样的东西

父组件

constructor(private router : Router){
    this.service.setParams(this.router.url);//you might need to split here
    //you can also make use of Activate Route and subcribe to params
}

服务

params:string;

setParams(params:string){
    this.params = params;
}

getparams(){
    return this.params;
}

现在在子 Lazyloaded 组件中，您可以使用 service.getparams() 获取参数