角度路由:如何在新页面上呈现子级

Question

当我单击一个按钮(在match-controls.component.html上(时，我试图在新页面上加载我的子组件(BasicStatControlComponent(。但是，它不是在新页面上呈现 BasicStatControlComponent，而是直接填充它在 match-controls.component.html 中的按钮下方。我将如何做到这一点？谢谢

我相信这是由于路由器插座的位置，但我真的不确定该怎么做？

我认为我的问题是，由于app.component.html已经router-outlet，那么我需要做的就是从 match-controls.component.html 中删除router-outlet。但是，从match-controls.component.html中删除router-outlet后，单击该按钮在应该呈现basic-stat-control.component.html时不会产生任何结果。通过控制台无错误

app-routing.module.ts

const routes: Routes = [
{ path: '', redirectTo: 'display-runner', pathMatch: 'full' },
{
path: 'display-runner',
loadChildren: () =>
import('./display-runner/display-runner.module').then(
m => m.DisplayRunnerModule
)
},
{
path:'match-controls',
loadChildren: () =>
import('./match-controls/match-controls.module').then(
m => m.MatchControlsModule
)
}
];

match-controls-routeting.module.ts

const routes: Routes = [
{ 
path: '', 
component: MatchControlsComponent,
children:
[
{ path: "", redirectTo: "match-controls" },
{ path: "/players-list", component: BasicStatControlComponent },
] 
}
];

match-controls.component.ts

<button mat-raised-button>
<a routerLink="/players-list">
<div class="statLabel">Stat Label</div>
<div class="statValue">Stat Value</div>
</a>
</button>

basic-stat-control.component.html

<h2>Players List</h2>
<div class="teamStyle">
<ul>
<li *ngFor="let player of homeTeams.roster">
<mat-slide-toggle>{{player.firstName + ' ' + player.lastName}}</mat-slide-toggle>
</li>
</ul>
</div>

匹配控件组件.html

<div class="wrapper">
<div class="left">
<h2>Home</h2>
<button mat-raised-button> <!-- implement ngFor: let statItem of statSchema-->
<a routerLink="/match-controls/players-list">
<div class="statLabel">Stat Label</div>
<div class="statValue">Stat Value</div>
</a>
</button>
<button mat-raised-button>
<div class="statLabel">Attempts Label</div>
<div class="statValue">Attempts Value</div>
</button>
<router-outlet></router-outlet>
</div>
<div class="right">
<h2>Guest</h2>
<button mat-raised-button>
<div class="statLabel">Stat Label</div>
<div class="statValue">Stat Value</div>
</button>
<button mat-raised-button>
<div class="statLabel">Attempts Label</div>
<div class="statValue">Attempts Value</div>
</button>
</div>
</div>

app.component.html

<mat-sidenav-content>
<router-outlet></router-outlet>
</mat-sidenav-content>

Answer 1

const routes: Routes = [
{ 
path: '', 
component: MatchControlsComponent,
children:
[
{ path: "", redirectTo: "match-controls" },
{ path: "players-list", component: BasicStatControlComponent },
] 
}
];

路径必须在没有/的情况下写入，即players-list

你写的是/players-list而不是players-list