ngOnInit called everytime i change route

Question

I have a controller implements OnInit The problem here is whenever i change the route and come back to same component ngOnInit is called everytime. What i am doing wrong i am not able to understand.Anybody please help me.

@Component({
    selector:'test-list',
    templateUrl:'./testlist.component.html',
    styles:[`.testname{
        text-transform : capitalize;
    }`]
})
export class TestListComponent implements OnInit{
    testList:Array<Test>;
    constructor(private testService:TestService,private router:Router){}
    ngOnInit(){
        this.testService.getTest()
        .subscribe(
            data=>this.testList = <Array<Test>>data,
            error=>alert(error)
        );
        console.log("ngInit")
    }
    editTest = (id)=>{
        this.router.navigate(['createtest',id]);
    }
}

Not sure if I understand your question, but that's the expected behavior? You change the route, and you return back the component is a new instance of `TestListComponent` so `OnInit()` call is expected. — penleychan, Jul 21 '17 at 14:10
It should be called only once as i know when the TestListComponent is created not every time when i come back to same component. Am i right? — Vikram Singh, Jul 21 '17 at 14:12
It's the purpose of OnInit. Every time the component is created, ngOnInit is called ! — Radouane ROUFID, Jul 21 '17 at 14:13
is component is created every time when we change the route? — Vikram Singh, Jul 21 '17 at 14:13
No, why would it? It's a new instance every time component is created. It's not a static class where it get's created once. — penleychan, Jul 21 '17 at 14:14
that's what i am asking why ngOnInit is called every time when route is changed — Vikram Singh, Jul 21 '17 at 14:14
I think we answered it pretty well... `It's a new instance every time component is called` — penleychan, Jul 21 '17 at 14:15
I think Vikram you are getting confused here. @12seconds last reply was for `It should be called only once as i know when the TestListComponent is created not every time when i come back to same component. Am i right?` and not `component is created every time when we change the route?`. — Aakash Thakur, Jul 21 '17 at 14:16
This means component is recreated every time route is changed. Is there any way to control this? So that component is created only once. — Vikram Singh, Jul 21 '17 at 14:24
Any reason why you would want that though? What is it that you are trying to achieve? — penleychan, Jul 21 '17 at 14:28
1In testService.getTest(), have you mapped an Response to a json payload `as Array`? >data .... is the outer <> necessary? if your return type is as I suggested this.testList = data would suffice — JGFMK, Jul 21 '17 at 14:28
I don't know if this helps Vikram, but think of it this way...: Let's say your component gets called twice from parent component with different data/id's, you'd need two instances for each set of data. If id 1 had 2 children, id2 had 3 children, the rendering would be different. A component can be a container for others too.. — JGFMK, Jul 21 '17 at 14:40

score 2 · Answer 1 · answered Jul 21 '17 at 14:27

2

ngOnInit() is executed everytime the component is loaded. It doesn't need to be called. This is a lifecycle hook for doing initial stuff. You can learn more about angular lifecycle hooks here

answered Jul 21 '17 at 14:27

Todor

51
3

score 0 · Answer 2 · answered Nov 05 '19 at 16:12

If in the constructor you subscribe to the active route, ngInit will be called every time the router navigates to that page.

constructor(
    private route: ActivatedRoute,
    private router: Router
) {
    this.route.queryParams.subscribe(async (params) => {
        if (this.router.getCurrentNavigation().extras.state) {
            // TODO save the params
        }
    });
}

ngOnInit(){
    console.log('ngOnInit called');
}

ngOnInit called everytime i change route

2 Answers2

Linked