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

角度路由器插座自动激活

1 个答案: