Angular2生命周期方法无序执行

Question

我将Angular2与ionic一起使用，并且我有这种组件：

class MyComponent implements OnInit, OnDestroy {
    ngOnInit() {
        console.log("init");
        socket.on("something", this.something.bind(this));
    }

    ngOnDestroy() {
        console.log("destroy");
        socket.remove("something", this.something.bind(this));
    }
}

要打开此页面，请编写this.nav.setRoot(MyComponent) 。 现在，我的页面显示MyComponent ，并且套接字正在监听“东西”。

要刷新它，我再次编写this.nav.setRoot(MyComponent) 。 现在，我的页面显示MyComponet ，并且套接字没有监听“某物”。

控制台输出为：

在里面

在里面

破坏

---

• 为什么首先运行ngOnInit第二组分的，然后才是ngOnDestroy第一个吗？
• 有没有办法先调用销毁，然后再调用init？
• 我还有其他方法可以处理套接字吗？

Answer 1

据我了解这一点，你不能真正控制，应该先在发生之间ngOnInit 第二组分和ngOnDestroy的第一个 。 这些挂钩至少来自2个不同的组件，彼此不依赖。 同一组件上的钩子是否相互依赖。 阅读此 。

可能是，这取决于当前是否更快地触发。

在这种情况下，您可以做的是，可以在调用this.nav.setRoot(MyComponent)之前将代码从ngOnDestroy this.nav.setRoot(MyComponent) 。

另外，如果要求不适合此类代码，则可以尝试刷新需要刷新的特定类型的UI组件，而不是像this.nav.setRoot(MyComponent)那样刷新整个组件。

您可以使用document.getElementByID('myDiv')操作类型来使用DOM刷新特定的UI组件。

希望这可以帮助。 如果没有，请说明细节。

Answer 2

Apparentally，离子有它自己的生命周期功能，如提到这里 。

• 代替ngOnInit使用ionViewDidLoad
• 代替ngOnDestoy使用ionViewWillLeave

像魔术一样工作。