Home / Questions / 431030
Accepted
junior
Asked: 2022-02-26 07:19:53 +0800 CST 2022-02-26 07:19:53 +0800 CST

检测来自路由器的角度变化

  • 772

我正在尝试检测 url 中的更改，但我没有成功，到目前为止我有这个：

主页组件.ts

constructor(private router: Router,private activatedRoute: ActivatedRoute){}

ngOnInit() {
   this.activatedRoute.url.subscribe(url => console.log('The URL changed to: ' + url));
   this.activatedRoute.queryParams.subscribe(params => console.log('The URL changed to: ' + params["name"]));

   this.activatedRoute.paramMap.subscribe((params: ParamMap) => { console.log(params) });
}

主页组件.html

<app-navbarcust (logout)="logout()"></app-navbarcust>
<div class="container mt-5" [ngClass]='{"pt-5":true}'>
    <router-outlet></router-outlet>
</div>

他<app-navbarcust>是导航的组件，他们服务良好的routerLink，我在控制台中得到：

在此处输入图像描述

我已经改变了几次路线，但我没有得到反应，谁能告诉我我做错了什么，另一个问题我没有在 ondestroy 中取消订阅，这是错的吗？

angular

1 Answers

  1. Best Answer

    您应该在 ngOnInit 或构造函数中订阅，而我用来检测路由更改的函数是 router.events 和 NavigationEnd 过滤。

    你在 ondestroy 中取消订阅也不错，因为如果你重新加载组件，它会重新订阅你的事件，你会有两个订阅者，但是你必须订阅分配它给一个变量来取消订阅同一个对象.

    public subscriber: Subscription;

//en el constructor llamo mi router
constructor (private router: Router) {}

//En el ngOnInit, me subscribo al router events, que es el que te mandara los eventos cada que se inicie la navegación, y filtramos que solo te mande cuando termina de navegar NavigationEnd

ngOnInit () {
    this.subscriber = router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event) => {
       console.log('The URL changed to: ' + event['url'])
    });
 }

  //En el onDestroy, valido si mi subscriber sigue activo y me desuscribo, si no seguirá activo escuchando cuando navegues a otro componente donde no lo requieras.
 ngOnDestroy () {
    this.subscriber?.unsubscribe();
 }
    • 3