角路由器插座自动激活

Question

在父视图中，我有一个 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，当您单击其中一个时，它会使用存储库视图选择器组件展开。

路线

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

Answer 1

试试这个

this.router.navigate([this.parentName, {
  outlets: {
    primary: null
  }
}], { queryParams: { viewStyle: this.viewStyle } })

Angular - clearing secondary routes