用相同的URL参数重新加载Angular 4+路由

问题描述：

我一直在做一些研究重新加载Angular 4+路由，它看起来好像首选的方法是，而不是监听组件内的URL参数更改并重新初始化那里的组件。用相同的URL参数重新加载Angular 4+路由

我遇到的问题是试图找到一个DRY（不要重复自己）的方法，使这个工作跨多个组件，当URL将是相同的（包括参数）。在AngularJS中，UI路由器很简单。

使用案例：

我有可以“浮动”的任何路线上面，点击它需要去到它涉及到内容的通知时，通知面板 - 这可能是许多不同类型的内容。

例如：/posts/:id或/groups/:id或/users/:id

如果用户已经在看的内容也不会重新加载和刷新，以反映该通知的消息。即，“John Doe对您的帖子发表了评论”（用户可能正在查看该帖子的过时版本），或者“Jane Doe接受了您加入某个群组的请求”（用户可能正在查看该群组的访客视图）。

我没有考虑检测的路线是一样的，当使用window.location.reload()，和这样的作品，但它是极不可取，由于它引起的开销（角度重新初始化，身份验证检查，插座重新连接，等等）。

任何建议将不胜感激！

答

当URL中没有任何更改时，无法仅重新加载路由。事实上，您拥有的唯一选项是window.location.reload()并且听取参数更改。

对于第二个选项，您可以创建一个通用服务，它将查看查询字符串中参数id的更改。让我们把它IdWatchService，它会是这个样子：

@Injectable() 
export class IdWatchService { 
    constructor(private route: ActivatedRoute) { 
    } 

    get idChange(): Observable<number | undefined> { 
    return this.route.queryParams.map(p => p['id'] as number | undefined).distinctUntilChanged(); 
    } 
}

然后你就可以在需要的变化（PostsComponent，GroupsComponent等）反应成分添加此服务的providers列表。最后，您可以将其注入到这些相同的组件和订阅idChange观察到：

@Component({ 
    templateUrl: './posts.component.html', 
    providers: [ 
    IdWatchService 
    ] 
}) 
export class PostsComponent { 
    constructor(idWatchService: IdWatchService) { 
    idWatchService.idChange.subscribe(id => { 
     // Load data for the new ID and refresh the view 
    }); 
    } 
}

我觉得这不是什么问题。引用来自问题> URL何时会相同（包括参数） – asmmahmud

@asmmahmud的确，我明白了。但是，如果没有'window.location.reload（）'，没有办法做到这一点。我稍微修改了一下我的答案，以说明这一点。 –

答

我面临同样的情况（非常类似于用例）早在角2.像其他的答案说，我在那里发现没有建立在这样做的角度上（也许框架的假设是，这种情况应该通过倾听参数的变化来解决）。

就像你，我不想重写我的代码，所以我使用了一个不同的解决方案，它有点更加黑客，但它工作时没有太多需要改变。

我使用的解决方案是在雇佣组织的相同级别下创建一个虚拟路由，您需要重新加载页面。在虚拟路由中，我使用了一个DummyComponent，它在路由参数中接收数据，描述我们需要到达的下一条路径（我们想要重新载入的路径）以及应该传递给它的哪个参数（例如，您身份已经提到），然后我使用导航方法注入的Rounter类去该路线。

我认为这个解决方案会比使用window.reload更加高效，而且写起来非常简单。（我无法复制该代码示例，因为我无法访问该代码）

答

window.location.reload（）;

这对我来说很有用。

这将刷新整个页面 – uriz

答

在这种情况下，您的路线不会改变，只是您的参数改变。

要解决此问题，您需要订阅ActivatedRoute参数。

export class MyClass implements OnInit { 
    constructor(private activatedRoute: ActivatedRoute) { 
     this.activatedRoute.params.subscribe((params)=>{ 
      console.log('updatedParams', params); 
     }); 
    } 
}

答

我面临与在报头通知部同样的问题我已经解决了这个问题，DoCheck

import { Component, DoCheck } from '@angular/core';

在类执行DoCheck接口

export class HeaderComponent implements DoCheck {

然后使用ngDoCheck（）方法并验证变量值是否更改，它将在您的通知区域中显示相同内容

ngDoCheck() { 
    // check if values changes 
}

答

通过this.router.url您将获得当前页面的url。比使用queryParames的路由器导航。以下是将queryParams作为分页页面传递的示例。你可以使用类似的方法。

const url = this.router.url.split('?')[0]; // this will remove previous queryparms 
    this.router.navigate([url], { queryParams: { page: $event } });

用相同的URL参数重新加载Angular 4+路由

相关推荐