Angular 2 ngOnInit is not called when routerlink changes

前端 未结 3 1233
故里飘歌
故里飘歌 2021-01-06 12:31

i have a menu bar that contain a list of menus loaded from express api and every menu is referenced to a page that have an alias wich will be the URL of tha

相关标签:
3条回答
  • 2021-01-06 13:24

    When only a router parameter is changes but the base of the route stays the same, Angular reuses the component. ngOnInit() is only called once after a component is instantiated, but not when the route changes.

    You can inject the router and subscribe to it's events or params to get notified about route changes.

    0 讨论(0)
  • 2021-01-06 13:28

    Here is a code example of what Gunter is talking about:

      constructor(private route: ActivatedRoute) { }
    
      ngOnInit() {
         this.route.params.subscribe(
         params => {
            let id= +params['id'];
            this.getProduct(id);
         });
      }
    

    This code watches for changes to the parameters and executes any code inside the arrow function.

    0 讨论(0)
  • 2021-01-06 13:31

    Well it fixed thanks to @Günter Zöchbauer and @DeborahK I changed the Page Component code from this

    @Component({
    selector: 'page',
    templateUrl: './page.component.html'
        })
        export class PageComponent implements OnInit {
            alias: string;
            page:Page;
    
            constructor(private router:Router,
                        private route: ActivatedRoute,
                        private pageService:PageService) {
    
                this.route.params.subscribe(
                    (params : Params) => {
                        this.alias = params["alias"];
                        console.log(this.alias)
                    }
                );
            }
    
        ngOnInit():void {
                debugger;
                this.pageService.getPage(this.alias).subscribe(page => {
                    this.page = page;
                    console.log(this.page);
                });
            }
        }
    

    to this one

    @Component({
    selector: 'page',
    templateUrl: './page.component.html'
        })
        export class PageComponent implements OnInit {
            alias:string;
            page:Page;
    
            constructor(private router:Router,
                        private route:ActivatedRoute,
                        private pageService:PageService) {
    
                this.route.params.subscribe(
                    (params:Params) => {
                        this.alias = params["alias"];
                        this.pageService.getPage(this.alias).subscribe(page => {
                            this.page = page;
                            console.log(this.page);
                        });
                        console.log(this.alias)
                    }
                );
            }
             ngOnInit():void {
                this.pageService.getPage(this.alias).subscribe(page => {
                    this.page = page;
                    console.log(this.page);
                });
            }
        }
    
    0 讨论(0)
提交回复
热议问题