Question

我试图在延迟加载的路由组件中获取父路由参数，但使用activatedRoute.parent.params似乎不起作用？我有一个实际上有效的片段，但它涉及到使用魔法＆＃39;用于检索值的数组索引号....

为什么会出现这种情况，是否有 clean 方法，我不需要检索数组值（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

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

 constructor(
    private route: ActivatedRoute

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

Answer 2

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

获取父级中的Params或URL并将其放入服务中。
从服务中访问Lazy加载组件中服务变量的参数。像这样的事情

<强>为父级

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()

获取参数

Answer 3

以下方法在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);
});

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

一个。你没有提到你正在使用的Angular版本，但在Angular-6中这两种方法都有效。

Answer 4

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

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

4 个答案: