角度路由器插座自动激活

Question

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

网格和列表html都在同一个父html文件中，但通过检查viewStyle变量来显示。当按下垫子按钮切换组按钮时，将设置新的viewStyle并将其作为查询参数传递；路线被导航回原始父视图，没有params，只有查询params-this.router.navigate([this.parentName],{ queryParams: { viewStyle: this.viewStyle }});。

因此，在网格视图中，当您单击子元素时，它会激活路由器链接并正确显示信息。然后，如果您单击列表视图，它将停用路由器链接并正确切换。问题是，当你点击回网格链接时，路由器出口会自动激活，最后一个要选择的子节点会显示在显示屏上。

当视图样式更改时，是否有重置路由器出口的方法，或者是否有其他方法来路由页面？

编辑：一个组织(父级)有多个存储库(子级)。。。我想在网格和列表视图中显示回购。当您在网格视图中单击回购时，它会在右侧显示信息，并将回购名称添加到url中。列表视图只是一个垫子扩展面板，当您单击其中一个时，它会使用存储库视图选择器组件展开。

路线

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>

组件.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 } })

角度清除次要路线