Angular Routing：如何在新页面上呈现子级答案

【问题标题】：Angular Routing: How to render child on new pageAngular Routing：如何在新页面上呈现子级
【发布时间】：2019-09-30 04:58:09
【问题描述】：

当我单击按钮（在 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-routing.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>

match-controls.component.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>

【问题讨论】：

尝试使用 routerLink="/match-controls/players-list" 而不仅仅是玩家列表
谢谢！错误现在消失了，现在 URL 将是 /match-controls/player-list。但是，我的 HTML 并没有真正出现。单击该按钮会更改 URL 以包含 /player-list，但 basic-stat-control.component.html 没有出现。
实际上，basic-stat-control.component.html (player-list) 在 match-controls.component.html 的正下方呈现。我希望它呈现为它自己的页面。我该怎么做呢？我已经编辑了 OP 以包含更改。我相信这是由于我包含路由器插座的位置，但我不确定。
必须查看其余代码才能弄清楚。 app.component 中有多个router-outlets 吗？
app.component.html 有router-outlet & match-controls.component.html 也有router-outlet

标签： angular routing angular-routing

【解决方案1】：

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

路径必须不带/，即players-list

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

【讨论】：