Question

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

我相信这是由于路由器插座的位置而引起的，但是我不确定如何处理？

我认为我的问题是，由于app.component.html已经拥有router-outlet，所以我要做的就是从match-controls.component.html中删除router-outlet。但是，从router-outlet中删除match-controls.component.html后，单击按钮应该呈现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>

Answer 1

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

路径必须不带/即players-list

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

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

1 个答案: