Angular 路由器使用相同的组件

Question

我有两个页面，我想为两个路径中的每一个使用相同的组件。原因是我共享 header，它有两个主要组件的搜索字段。每当我更改页面时，我都会不断收到对该服务的额外调用。第一次2，第二次4，第三次6...我只想让页面重新开始。这就是构造函数正在发生的事情。我所做的只是 show/hide 基于路线 url 的库和详细信息页面 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]);
          }
      }
  });

基本上，图书馆组件有一个图书列表，点击后会转到该图书的详细信息页面。我 show/hide 库和详细信息页面

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

这里是服务调用，它只是 returns dummyJSON 数据

  searchById(id)  {

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

Answer 1

您的代码中存在订阅泄漏，将其更改为以下内容

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

   ...

Answer 2

路由事件回来后我刚退订

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

Angular 路由器使用相同的组件

Angular Router Use Same Component

angular-routing

angular