路由两次重定向到组件

Question

我重定向到另一个组件。

this.router.navigate(["book/"+this.organizationKey+"/"+this.projectKey+"/"+this.books[bookIndex].key])

所有字段都有正确的值。 当我有以下路线时：

  { path: 'book/:organizationKey/:projectKey/:bookKey', component: BookComponent},
  { path: 'book/:organizationKey/:projectKey', component: BookComponent},

系统首先使用 bookKey 变量正确重定向，然后再次重定向，不会导致页面重新加载并显示错误。

当我评论第二行时，它工作正常，但给出错误消息： 无法匹配任何路线。 URL 段：'book/octigo/NNNN' 我检查了ngAfterViewInit在目标组件中启动了两次，这当然是一个问题。

我的应用程序的其他区域的情况类似，同一页面有两种类型的路由。

这是我的系统的路由

import { RouterModule, Routes } from '@angular/router';


import { BookComponent } from './book/book.component';
import { BooklistComponent } from './booklist/booklist.component';


const routes: Routes = [
  { path: '', redirectTo: 'landing', pathMatch: 'full' },

  { path: 'book/:organizationKey/:projectKey', component: BookComponent},
  { path: 'book/:organizationKey/:projectKey/:bookKey', component: BookComponent},
  { path: 'booklist/:organizationKey/:projectKey', component: BooklistComponent},

];

这是书籍组件的一部分：

    constructor(private _route: ActivatedRoute, public dialog: MatDialog, private router: Router, private service: SharedServiceService, private firestore: FirestoreService) { 
    service.changeIsProjectVisible(true)
    service.changeIsSearchVisible(true)
    service.isChatVisible.subscribe(i => {
      this.isChatVisible = i
    })
    service.changeIsHeaderVisible(true)
  }

  ngAfterViewInit() {
    this.isLoadingLabelVisible = true
    this._route.params.subscribe(params => {
      this.organizationKey = params['organizationKey']
      this.projectKey = params['projectKey']
      this.bookKey = params['bookKey']
 
      if (this.organizationKey != undefined) {
        this.service.changeOrganization(this.organizationKey)
      }
      if (this.projectKey != undefined) {
        this.service.changeProject(this.projectKey)
      }
      getAuth().onAuthStateChanged(user => { 
        if (user) {
          this.userId = user.uid
          this.firestore.getProjectReadOnlyStatus(this.organizationKey, this.projectKey, this.userId).then(readonly => {
            this.isReadOnly = readonly
          })
        }
        this.getTemplates()
      })
    })
  }

Answer 1

我终于找到了。 这是更正后的代码行：

  if (this.service.currentOrganizationKey != this.organizationKey && this.organizationKey != undefined) {
    this.service.changeOrganization(this.organizationKey)
  }
  if (this.service.currentProjectKey != this.projectKey && this.projectKey != undefined) {
    this.service.changeProject(this.projectKey)
  }

问题是，在路由之后，我立即更新了organizationKey和projectKey，即使它们不需要更新。每个页面上都有一个 headerComponent 正在监听这两个变量的变化。当 header 收到信号表明它们已更改时，发生了一些奇怪的事情，并且路线完成了两次。添加附加条件后，问题消失了。