父组件从 ActivatedRoute 获取空参数。

17 浏览
0 Comments

父组件从 ActivatedRoute 获取空参数。

我有一个主要的组件，在其中有一个router-outlet。在加载在router-outlet中的组件中，我这样获取url参数：\n

ngOnInit(): void {
    // _route is injected ActivatedRoute
    this._route.params.subscribe((params: Params) => {
        if(params['url']){
          this.testUrl = params['url'].replace(new RegExp('\%2[fF]', 'g'), '/');
        }
    });
}

\n这个方法可以正常工作，但是当我尝试在顶层组件上使用时，params对象总是为空。我不明白为什么，因为嵌套组件的param对象中有数据，我尝试以完全相同的方式访问它。没有错误可以参考，param对象只是空的。\n为什么我的父组件无法从ActivatedRoute中获取正确的Params对象？

0

3 答案

0 Comments

Angular中的路由参数是通过ActivatedRoute来获取的，通常情况下，我们可以在组件中直接订阅ActivatedRoute的params属性来获取参数的值。但是如果希望通过一个服务来获取路由参数，上述的方法将不起作用。

为了解决这个问题，可以使用一个服务来防止“路由参数值提取逻辑”的重复。下面是一个示例服务代码：

({
  providedIn: 'root'
})
export class MyParamsAwareService {
  constructor(private router: Router) { 
    this.router.events
      .pipe(
        filter(e => (e instanceof ActivationEnd) && (Object.keys(e.snapshot.params).length > 0)),
        map(e => e instanceof ActivationEnd ? e.snapshot.params : {})
      )
      .subscribe(params => {
      console.log(params);
      // 在这里执行你想要的操作！！！
      });
  }
}

这个服务通过订阅Router的events属性来监听路由事件。然后，通过pipe操作符进行过滤和转换，只保留ActivationEnd事件并且参数数量大于0的事件。最后，订阅这些事件并获取参数的值。

通过这种方式，我们就可以在服务中获取路由参数的值，避免了在每个组件中重复编写获取参数的逻辑。

同样的，也可以在服务中实现其他的操作，根据具体需求来处理路由参数的值。

0
0 Comments

问题的原因是，当在根路由的子组件中使用`actRoute.params.subscribe`时，无法获取到参数。解决方法是使用`actRoute.firstChild.params.subscribe`来订阅参数。

原因是因为`actRoute.params.subscribe`只能在根路由组件中使用，而无法在根路由的子组件中获取参数。所以需要使用`actRoute.firstChild.params.subscribe`来获取子组件的参数。

解决方法是在`AppComponent`中引入`ActivatedRoute`和`Router`，并在`ngOnInit`方法中使用`actRoute.firstChild.params.subscribe`来订阅参数。在回调函数中判断参数是否存在，并进行相应的操作。

这个解决方法可以解决在根路由的子组件中无法获取参数的问题。但是需要注意，如果项目中没有在根路由中包含子组件，这个解决方法就无法使用了。

对于Angular的初学者来说，可能不太理解为什么要使用`actRoute.firstChild.params.subscribe`而不是直接使用`actRoute.params.subscribe`。这是因为在根路由的子组件中，需要通过`actRoute.firstChild`来获取子组件的参数。而`actRoute.params.subscribe`只能获取到根路由的参数，无法获取到子组件的参数。

这个解决方法是比较简单和直接的，可以解决在根路由的子组件中获取参数的问题。

0
0 Comments

问题的原因是在AppComponent组件中，通过订阅路由事件的方式获取路由参数时，使用了错误的属性名this.route.events。正确的属性名应该是this.router.events。这就导致了获取路由参数的代码无法正常执行，从而使得父组件无法从ActivatedRoute中获取到空的参数。

解决方法是将this.route.events改为this.router.events，即使用正确的属性名进行订阅路由事件。这样就能正确获取到路由参数。

以下是修改后的代码示例：

import { Component } from '/core';
import { Router, ActivatedRoute, Params, RoutesRecognized } from '/router';
export class AppComponent {
    constructor(private route: ActivatedRoute, private router: Router) {
    }
    ngOnInit(): void {
        this.router.events.subscribe(val => {
            if (val instanceof RoutesRecognized) {
                console.log(val.state.root.firstChild.params);
            }
        });
    }
}

除了以上的解决方法，还可以使用服务来在组件之间共享数据。更多关于此概念的详细信息可以参考上述提供的链接。

需要注意的是，以上代码示例是在Angular 11下进行测试通过的，如果使用的是其他版本的Angular，可能会有一些变化。

0