angular - URL 更改在 Angular 中未触发

Question

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

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

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

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

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

这是我在路由模块中缺少的东西吗(尽管我不这么认为，因为 URL 确实发生了变化)，还是我在应用程序页面上的 Component 类中缺少的东西？？？

Answer 1

告诉路由器执行此操作的 Angular 方法是使用 onSameUrlNavigation从 Angular 5.1 开始...但我认为实现这个仍然存在一些问题。

所以我必须以不同的方式解决这个问题(Stackblitz)，通过subscribing至route events并实际调用 custom reInit method 。

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

    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，则应该将其删除并实现一个自定义方法，如示例中所示。

我添加了unsubscription方法因为 this Angular 错误。 Angular 实际上应该在销毁组件时自动取消订阅 router.events，但由于情况并非如此，如果您不手动取消订阅，您最终将在输入组件时多次调用 http 请求(例如)。