URL 更改未在 Angular 中触发答案

【问题标题】：URL Change not firing in AngularURL 更改未在 Angular 中触发
【发布时间】：2018-08-15 23:57:09
【问题描述】：

所以我的 Angular 应用程序有一个搜索栏，如果你在这个搜索栏中输入一些内容，它会进行搜索并进入结果页面。一切都很好。

现在，如果您的搜索未返回任何结果，则会加载结果页面并告诉您“searchterm”未返回任何结果。此时，URL 为localhost:4200/searchResults;query=searchterm。再次 - 一切都如预期的那样。

现在，如果您转到搜索栏并输入不同的搜索词，则什么也不会发生...

嗯，这不正确... URL 现在显示 localhost:4200/searchResults;query=NEWsearchterm，但是因为我们在“相同”应用页面上，所以 ngOnInit 不会重新触发（因此实际上是在搜索该术语）也不会触发 ngOnChanges（因此实际搜索这个词）...

路由模块似乎做了它应该做的事情，因为我们的 URL 确实更改为引用新的搜索词，但没有发生应该发生的事情，我不知道是什么？

这是我在路由模块中遗漏的问题（尽管我不这么认为，因为 URL 确实发生了变化），还是我在应用页面的 Component 类中遗漏了什么？？？

【问题讨论】：

标签： angular angular-routing ngonchanges

【解决方案1】：

告诉路由器这样做的角度方式是使用onSameUrlNavigation as of angular 5.1...但我认为实现这一点仍然存在一些问题。

所以我不得不以不同的方式（Stackblitz）解决这个问题，通过subscribing 到route events 并实际调用custom reInit method。

诀窍是将所有订阅添加到同一个对象，然后仅在 Angular 调用 ngOnDestroy 时取消订阅，并且将模板变量的其余部分从 custom destroy method 更改...如果您没有任何订阅并且不实现 ngOnInit lifcycle ehook，那么@Yazan Mehrez 的答案应该可以，但是如果您确实有订阅或使用钩子，那么您需要像下面这样的实现来防止内存泄漏：

    public subscribers: any = {};

    constructor(private router: Router) {
    /** 
      * This is important: Since this screen can be accessed from two menu options or has query string parameter changes  
      * we need to tell angular to reload the component when this happens.
      * It is important to filter the router events since router will emit many events,
      * therefore calling reInitComponent many times wich we do not want.
      */   
      this.subscribers._router_subscription = this.router.events.filter(evt => evt instanceof NavigationEnd).subscribe((value) => { 
        this.reInitComponent();
      });
    }

    reInitComponent() {
        this.customOnDestroy();
        this.customOnInit();
    }

    customOnInit() {
        // add your subscriptions to subscribers.WHATEVERSUB here
        // put your ngOnInit code here, and remove implementation and import 
    }

    customOnDestroy() {
      // here goes all logic to re initialize || modify the component vars  
    }

    /**
     * onDestroy will be called when router changes component, but not when changin parameters ;)
     * it is importatn to unsubscribe here
     */
     ngOnDestroy() {  
       for (let subscriberKey in this.subscribers) {
          let subscriber = this.subscribers[subscriberKey];
          if (subscriber instanceof Subscription) {
            subscriber.unsubscribe();
          }
        }
     }

请注意，如果您实现 lifecylce hook ngOnInit，则应将其移除并实现示例中的自定义方法。

由于this 角度错误，我添加了unsubscription 方法。 Angular 在销毁组件时实际上应该自动从 router.events 取消订阅，但由于情况并非如此，如果您不手动取消订阅，您最终会调用 http 请求（例如）与您进入组件一样多次。

【讨论】：

【解决方案2】：

尝试订阅路由更改

class MyClass {
  constructor(private router: Router) {
    router.events.subscribe((val) => {
      if(val instanceof NavigationEnd){
        console.log("refreshing");
      }
    });
  }
}

【讨论】：