角度路由器插座自动激活

在父视图中，我有一个mat-button-toggle-group，用于在网格和列表布局之间切换 . 网格布局使用router-outlet显示子组件 <router-outlet></router-outlet> ，但列表布局使用选择器 <child-view [child]="childItem"></child-view> 直接实现子组件 .

gird和list html都在同一个父html文件中，但是通过检查 viewStyle 变量来显示 . 当按下mat-button-toggle-group按钮时，新的viewStyle被设置并作为查询参数传递;路线被导航回原始父视图，没有参数，只查询参数 - this.router.navigate([this.parentName],{ queryParams: { viewStyle: this.viewStyle }}); .

因此，在网格视图中，当您单击子元素时，它会激活路由器链接并正确显示信息 . 然后，如果单击列表视图，它将取消激活路由器链接并正确切换 . 问题是当您单击返回到网格链接时，路由器插座会自动激活，并且显示屏中将显示要选择的最后一个子节点 .

有没有办法在viewStyle更改时重置路由器插座或是否有其他方式来路由页面？

编辑：组织（父）有多个存储库（子）...我想在网格和列表视图中显示存储库 . 当您在网格视图中单击repo时，它会在右侧显示信息，并将repo名称添加到URL . 列表视图只是mat-expansion-panels，当您单击它时，它会与存储库视图选择器组件一起展开 .

routes

const appRoutes: Routes = [
  {
    path: ':orgName',
    component: OrganizationViewComponent,
    children:[
      {
        path: ':repoName',
        component: RepositoryViewComponent,
      },
    ],
  },
];

HTML

<mat-button-toggle-group (change)="viewChange($event)" [value]="viewStyle">
  <mat-button-toggle value="grid">Grid View</mat-button-toggle>
  <mat-button-toggle value="list">List View</mat-button-toggle>
</mat-button-toggle-group>

<div *ngIf="viewStyle==='grid'">
  <div class="org-grid-view-content">
    <h3>Repositories for {{orgName}}</h3>
    <span *ngFor="let repo of repos">
      <mat-card class="col-sm-1 repo-label" (click)="displayRepoView(repo)" [routerLink]="[repo.name]" [queryParams]="getQueryParams()" *ngIf="shouldShowRepo(repo)"
  [ngClass]="applyClasses(repo)">
      <!-- mat-card-information -->
      </mat-card>
    </span>
  </div>

  <div class="repo-view-container">
    <h3 *ngIf="currentrepo">Pull Requests for {{currentrepo.name}} repository</h3>
    <h3 *ngIf="!currentrepo">Select a repository to view pull request and status details</h3>
    <p>sort and search options</p>
    <router-outlet</router-outlet>
  </div>
</div>

<div *ngIf="viewStyle==='list'">
  <div class="org-list-view-content">
    <h3>Repositories</h3>
    <span *ngFor="let repo of repos">
      <mat-expansion-panel>
        <repository-view
        [repo]="repo">
        </repository-view>
      </<mat-expansion-panel>
    </span>
  </div>
</div>

component.ts

viewChange(event: any) {
    this.viewStyle = event.value;
    this.openRepos = [];
    this.currentrepo = null;
    this.router.navigate([this.orgName, {
      outlets: { primary: null }
    }], { queryParams: this.getQueryParams() })
  }