0

我正在尝试在我的 Angular 应用程序中获取我的激活路由，以便我可以在 onInit 生命周期挂钩中加载它，这样当用户返回到组件时，组件将加载他们上次离开时​​的 url 状态.

我已经导入了 activateRoute 并将其注入到构造函数中：

constructor(private route: ActivatedRoute) {}

然后，在 onOnit 中，只是为了看看我有什么，我尝试了这个：

console.log('路由信息：', this.route.queryParams);

我得到的是 a behavior subject，所以我尝试添加：

console.log('route info: ', this.route.queryParams.toArray().subscribe());

现在返回一个subscriber.

底线，我想要的是能够捕获当前的 url/查询字符串，并在 ngOnInit 中加载它。像这样的东西：

ngOnInit() {
  this.loadData();
}

loadData() {
  this.route.queryParams;
}

这看起来很接近吗？我怎样才能真正让组件使用激活路由来加载 url/查询字符串中的内容？

更新：在下面的建议之后，我认为它可能看起来像这样？

ngOnInit() {
    this.loadData();
}

loadData() {
    let currentRoute = this.route.params.subscribe(params => {
        // logic goes here
        console.log(params['firstName']);
        return params;
      });
    this.router.navigate([currentRoute]);
}

更新 2：

如果我这样做：

ngOnInit() {
    this.activatedRoute.params.subscribe((params: Params) => {
        let myParams = params;
        console.log(myParams);
      });
}

我在控制台中得到了这个：

{pn_firstName.e: "1", pn_firstName.v: "John"}

这就是我的 url/查询字符串的样子：

http://localhost:4200/consulting;pn_firstName.e=1;pn_firstName.v=John

所以它似乎是从我在控制台中看到的获取查询字符串。

那么，最重要的是，这会在组件加载时加载 url/查询字符串的当前状态吗？

ngOnInit() {
    let currentRoute = this.activatedRoute.params.subscribe((params: Params) => {
        let myParams = params;
        console.log(myParams);
        return myParams;
    });
    this.router.navigate([currentRoute]);
}

显然，不是，因为这是我在加载组件时得到的 url：

http://localhost:4200/consulting;closed=false;_parent=null;_parents=null;_subscriptions=%5Bobject%20Object%5D;syncErrorValue=null;syncErrorThrown=false;syncErrorThrowable=false;isStopped=false;destination=%5Bobject%20Object%5D
4

3 回答 3

1

如果您正在寻找可以在不丢失参数的情况下重新加载当前路线的东西，您可以尝试以下策略

在您的组件构造函数上

constructor(private router:Router){
    this.router.routeReuseStrategy.shouldReuseRoute = function(){
            return false;
     } }

并重新加载到您当前所在的同一路线。从 URL 属性中，您将获得整个 url

this.router.navigated = false;
      this.router.navigate([this.router.url]);

另一种方法

创建一个方法

redirectTo(uri) {
    this.router.navigateByUrl('/', {skipLocationChange: true}).then(() =>
    this.router.navigate([uri]));
  }

并像下面一样调用

 this.redirectTo(this.router.url);
于 2018-09-25T20:55:22.303 回答
0

您可以snapshot用于route

this.route.snapshot- 如果你不想subscriber用作this.route.params.subscribe

同样的queryParams- 它可以通过snapshot

于 2018-09-25T20:13:44.400 回答
0

您loadData()可以如下所示：

this.route.params.subscribe(params => {
  // logic goes here
  console.log(params['id']); // example 
});
于 2018-09-25T19:49:45.163 回答