javascript - 关于每次 URL 更改的通知

Question

是否可以获取有关 URL 每次更改的(事件)通知(无需重新加载页面，就像我们使用 location.replaceState() 所做的那样)？

更准确地说:我不更改组件或页面。我只是为了将来更改网址。

UPADATE 不是优雅的解决方案:手动触发

var popStateEvent = new PopStateEvent('popstate', { state: state });
dispatchEvent(popStateEvent);

Answer 1

您可能需要创建一个可注入(inject)到 root 的服务，并为其添加一个主题，该主题会在每个组件的每个 onDestroy 中触发。

在服务中:

//imports here
export class TestService {
   pageChange$ = new Subject();
}

在您想要触发更改的所有组件中:

//imports
export class TestComponent implements OnDestroy {
//component properties
  constructor(private testSrv: TestService){}
  ngOnDestroy(){
    let notification = 'This page is getting closed';
    testSrv.pageChange$.next(notification);
  }
}

在您想要接收更改的组件中:

//imports
export class HeaderComponent implements OnInit {
//component properties
  constructor(private testSrv: TestService){}
  ngOnInit(){
    let notification = 'This page is getting closed';
    testSrv.pageChange$.subscribe(notification => {
       console.log(notification);
     });
  }
}

这是您可以采取哪些措施来解决问题的总体思路。

更新

如果您只想跟踪 url 更改，则需要使用 Router:

constructor(private router: Router) {}

ngOnInit(){
   this.router.events.subscribe((val) => {
        if(this.router.navigated){
           //do something here
        }
    });
}