Angular 角度路由器使用相同的组件

我有两个页面，我想为两条路径中的每一条使用相同的组件。原因是我共享了标题，其中有两个主要组件的搜索字段。每当我更改页面时，我都会不断接到该服务的额外呼叫。第一次2，第二次4，第三次6…我只想让页面重新开始。这就是构造函数正在发生的事情。我所做的就是根据路由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]);
          }
      }
  });

基本上，library组件有一个图书列表，单击该列表可转到该图书的详细信息页面。我显示/隐藏库和详细信息页面

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

这是服务调用，它只返回dummyJSON数据

  searchById(id)  {

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

---

您的代码中存在订阅泄漏，请将其更改为下面的

  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 => { },
          () => { }
    );

   ...

private unsubscribeAll:Subject=new Subject（）；
恩贡特洛伊（）{
this.unsubscribeAll.next（）；
此为.unsubscribeAll.complete（）；
}
...
this.mainService.searchById（id）
.烟斗(
takeUntil（此为全部取消订阅）
)
.订阅(
data=>{this.detail=true；this.bookdata=data；console.log（data）；}，
err=>{}，
() => { }
);
...

路由器事件返回后，我刚刚取消订阅

      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();
      }
  });

---

你好您可以考虑创建一个空路由来呈现<代码>库组件，并具有<代码>库< /COD>和<代码>细节/ID：ID/COD>作为其每个组件的子元素。您只需在

库组件中添加
。不知道它为什么打2次电话，但是考虑取消订阅你的服务电话。你如何比较一个“空路由”？我不明白你的意思。
{path:''，component:BaseStructureComponent，children:[{path:'library'，component:'LibraryComponent'}，{path:'detail/:id'，component:'DetailComponent'}}