René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Component lifecycles differs on nativescript-angular and angular2 on web.","articleBody":"I ran into this problem and I'll try to explain it here.\n\nWith `nativescript-angular` the lifecycle hook `ngOnDestroy` isn't called when we navigate away from a page as it would be on web. Navigating back reuses the old component with `nativescript-angular` but a new instance is created on web.\n\nI've based an example on Nathan Walker's `angular2-seed-advanced`:\nhttps://github.com/m-abs/angular2-seed-advanced/tree/ngondestroy-not-triggered\n\nI've two component for my routes:\n[HomeComponent](https://github.com/m-abs/angular2-seed-advanced/blob/ngondestroy-not-triggered/src/client/app/components/about/about.component.ts) \n[AboutComponent](https://github.com/m-abs/angular2-seed-advanced/blob/ngondestroy-not-triggered/src/client/app/components/home/home.component.ts)\n\nEach component have a `instanceNo`, so we can identify multiple instances of the component.\n\n| Action | Web | TNS |\n| --- | --- | --- |\n| Launch application | HomeComponent\u003c1\u003e.ngOnInit() is called | HomeComponent\u003c1\u003e.ngOnInit() is called |\n| Click on 'ABOUT' | HomeComponent\u003c1\u003e.ngOnDestroy() followed by AboutComponent\u003c1\u003e.ngOnInit() | AboutComponent\u003c1\u003e.ngOnInit() |\n| Click on 'HOME' | AboutComponent\u003c1\u003e.ngOnDestroy() followed by HomeComponent\u003c2\u003e.ngOnInit() | HomeComponent\u003c2\u003e.ngOnInit() |\n| Click back | HomeComponent\u003c2\u003e.ngOnDestroy() followed by AboutComponent\u003c2\u003e.ngOnInit() | HomeComponent\u003c2\u003e.ngOnDestroy() |\n| Click back again | AboutComponent\u003c2\u003e.ngOnDestroy() followed by HomeComponent\u003c3\u003e.ngOnInit() | AboutComponent\u003c1\u003e.ngOnDestroy() |\n\nAs you can see the two behaves very differently.\n## On web:\n- Navigate to a new page, the current component is destroyed and a new is created.\n- Navigating hitting back, the current component is destroyed and a new is created.\n## With nativescript-angular:\n- Navigate to a new page, creates the new component but leaves the current component as is.\n- Navigating hitting back, the current component is destroyed and the old component is reused.\n\nIf you want to try for yourself, checkout my branch `ngondestroy-not-triggered` and run:\n## For web:\n\n``` bash\nnpm run start \n```\n## For nativescript-angular with android:\n\n``` bash\nnpm run start.livesync.android\n```\n\nShouldn't the two behave the same?\nSo components are destroyed when we navigate from a page and (re)created when we navigate to the page?\n","author":{"url":"https://github.com/m-abs","@type":"Person","name":"m-abs"},"datePublished":"2016-07-27T23:52:46.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":30},"url":"https://github.com/374/nativescript-angular/issues/374"}