Angular Router Use Same Component

Question

I have two pages that I want to use the same component for each of the two paths. The reason is that I share the header which has two search fields for the main component. Whenever I change the page, I keep getting additional calls to the service. The first time 2, the second time 4, the third time 6...I just want the page to start over. This is what is happening the constructor. All I do is show/hide the library and detail page based on the route url.

  this.router.events.subscribe((val) => {
      if (val instanceof NavigationEnd) {
          let urlArray = val.url.split('/');
          if (urlArray[1] === 'library') {
              this.detail = false;
          } else if (urlArray[1] === 'detail') {
              this.searchById(urlArray[2]);
          }
      }
  });

Basically the library component has a list of books, that when clicked on go to a details page for that book. I show/hide the library and detail page

const appRoutes: Routes = [
  { path: 'library', component: LibraryComponent },
  { path: 'detail/:id',      component: LibraryComponent },
  { path: '',   redirectTo: '/library', pathMatch: 'full' }
];

Here is the service call, it just returns dummyJSON data

  searchById(id)  {

  this.mainService.searchById(id).subscribe(
      data => { this.detail = true; this.bookdata = data; console.log(data); },
      err => { },
          () => { }
)};

Hi. You could consider creating an empty route to render LibraryComponent and have library and detail/:id as its children with different components to each. You'd only need to add a <router-outlet> inside LibraryComponent. Not sure why it's calling 2 times, tho, but consider unsubscribing your service call. — João Ghignatti
– João Ghignatti, Commented Jul 30, 2019 at 20:00
How do you compare an 'empty route'? I don't understand what you mean. — The Hawk
– The Hawk, Commented Jul 30, 2019 at 20:29
{path: '', component: BaseStructureComponent, children: [{path: 'library', component: 'LibraryComponent'}, {path: 'detail/:id', component: 'DetailComponent'}]} — João Ghignatti
– João Ghignatti, Commented Jul 30, 2019 at 20:44

Reza · Accepted Answer · 2019-07-30 20:18:50Z

1

You have subscription leak in your code, change it to below

  private unsubscribeAll: Subject<any> = new Subject<any>();

  ngOnDetroy() {
     this.unsubscribeAll.next();
     this.unsubscribeAll.complete();
  }


  ...
  this.mainService.searchById(id)
    .pipe(
       takeUntil(this.unsubscribeAll)
    )
    .subscribe(
      data => { this.detail = true; this.bookdata = data; console.log(data); },
      err => { },
          () => { }
    );

   ...

answered Jul 30, 2019 at 20:18

Reza

20.1k18 gold badges102 silver badges177 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

The Hawk · Accepted Answer · 2019-07-31 14:05:45Z

0

I just unsubscribed from the router event after it came back.

      const routerEvent = this.router.events.subscribe((val) => {
      if (val instanceof NavigationEnd) {
          let urlArray = val.url.split('/');
          if (urlArray[1] === 'library') {
              this.detail = false;
          } else if (urlArray[1] === 'detail') {
              this.searchById(urlArray[2]);
          }
          routerEvent.unsubscribe();
      }
  });

answered Jul 31, 2019 at 14:05

The Hawk

1,5686 gold badges28 silver badges45 bronze badges

Collectives™ on Stack Overflow

Angular Router Use Same Component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related