检测从命名路由器出口中的组件返回的导航

Posted 2023-03-13

【中文标题】检测从命名路由器出口中的组件返回的导航

【英文标题】：Detect navigation back from component in named router outlet

【发布时间】：2018-08-06 11:44:51

【问题描述】：

我在路由器插座中显示一个 A 组件，在其中我有另一个 B 组件，它有一个命名的路由器插座，我在其中显示另一个 C 组件。

Router-outlet
A Component
    B Component
    Named Router-outlet
        C Component

在这个C组件中，我执行了一个验证，之后，我想回到A组件重新加载它（执行ngOnInit或任何方法）。

我已经尝试过使用不同的方法，例如导航、navigateByUrl 和 Location.back()。问题是 A 组件 永远不会被销毁，因此它永远不会执行 ngOnInit 方法。

有人知道我该如何解决这个问题吗？谢谢！

【参考方案1】：

我不太确定您将如何再次执行 ngOnInit，但一种解决方法是订阅路由器事件（如 here 所述）并在其中执行您想要的代码。

【讨论】：

谢谢！它起作用了......我不知道路由器事件。

【参考方案2】：

您可以创建一个服务来处理这种特定情况

   export class RefreshService   
       private refreshMessage = new BehaviorSubject<any>(null);        
       refreshObservable = this.refreshMessage.asObservable();

       sendRefreshMessage() 
         this.refreshMessage.next("");
       
    

在组件 A 中我订阅了我的 observable

export class AComponent implements OnInit 

  constructor(private refreshService: RefreshService)  

  ngOnInit() 
   this.refreshService.subscribe(res =>  do stuff here  );
  

执行验证后在组件 C 中：

this.refreshService.sendRefreshMessage();

这将触发您在组件 A 中的订阅，然后将执行订阅中的所有代码

【讨论】：

谢谢！这也有效，但我认为@Lars 提出的解决方案更清洁。如果您有任何意见，请告诉我。再次感谢！