本机脚本 |在android后退按钮导航后调用ngOnInit

Posted 2023-03-13

【中文标题】本机脚本 |在android后退按钮导航后调用ngOnInit

【英文标题】：nativescript | call ngOnInit after android back button Navigation

【发布时间】：2018-11-19 19:44:07

【问题描述】：

我在处理后退按钮时遇到问题，当用户点击后退按钮时，不会触发 ngOnInit 并且组件无法按预期工作。 从我所看到的，我了解到，当录音时，它只会让 ngOnDestroy 着火，而不是 ngOnInit

这是生命周期

打开 App --> ngOnInit() 调用

单击另一个组件 --> 调用新组件的 ngOnInit()

点击返回 --> ngOnDestroy

是否有人遇到过同样的问题，您是如何处理的？ 谢谢

【问题讨论】：

你可以使用window的ondestroy事件

按下后退按钮就像导航到后退组件，为什么 ngOnInit 应该触发？

【参考方案1】：

经过一番搜索，我决定使用这个解决方案

在我需要运行 ngOnInit 的组件中，即使导航来自后退按钮或我添加的功能

constructor(private location : PlatformLocation) 

ngOnInit() 
    this.location.onPopState(() => 
    this.initComponent();
);

【讨论】：

这不会区分你来自哪里......有时，你想根据你之前的页面做不同的逻辑......（你可以检查路径/url）

另外，考虑一下：A---navigateTo-->B--navigateTo---->--navigateTo----->C----navigateTo--->A，用我的代码你可以检测到 A------->一种情况。

但是对于简单的事情来说这是一个很好的解决方案

谢谢！，它现在似乎工作正常，但我会对其进行更多测试，如果它不能按我的意愿工作，请将其替换为您的解决方案

我用this.location.onPopState(() => this.initComponent(); );解决了这个问题

【参考方案2】：

为什么你认为ngOnInit 应该跑在后面？它没有

解决方案是使用路由器事件：

例如：从"/beatles/john/songs/strawberryfields" 检测到back 到"/doors/jim/girlfriend/pam" 的解决方案

Doors page --------> Beatles page.....(back tapped)----------->Doors

是：

将此方法添加到共享服务中：

 public onNavigatePreviousToCurrent(pre: string, current: string  ): Observable<any>
        
            return this.router.events.pipe(filter(e => e instanceof NavigationEnd), pairwise(), filter((f: [any, any]) =>
                                                                                                       
                                                                                                           return f[0].url.toLowerCase()
                                                                                                                      .indexOf(pre.toLowerCase()) > -1 &&
                                                                                                                  f[1].url.toLowerCase()
                                                                                                                      .indexOf(current.toLowerCase()) > -1;
                                                                                                       )  );
        

在 Doors 页面中调用它：

 ngOnInit()
        
            let f = this._routingService.onNavigatePreviousToCurrent("john", "pam") //or doors or jim
                        .subscribe((res) =>
                                   
                                    //do what you want here !!!
                                   , (error) =>
                                   
                                   );

   //don't forget to unsubscribe `f`
       

请注意，您也可以在 Doors 中使用来自 /beatles/john/songs/strawberryfields（beatles,john,songs,strawberryfields,atles)----> 的任何令牌。 （子字符串）

基本上，此方法会检测您来自哪里以及back 之后的目的地是什么。

顺便说一句，你可能想说：“好吧，我不知道我在哪里，我只想要用户点击“返回”的情况。

答案：

this._routingService.onNavigatePreviousToCurrent("/", "pam") ;
// "/" will always be present , so basically this ^ detects back from anywhere to Doors page