angular - Angular Routing：如何在新页面上呈现子级

问题描述

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

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

我认为我的问题是，既然app.component.html已经router-outlet那么我需要做的就是router-outlet从 match-controls.component.html 中删除。但是，router-outlet从match-controls.component.html单击按钮中删除后，当它应该呈现basic-stat-control.component.html. 通过控制台没有错误

应用程序路由.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
      )
  }
];

匹配控制-routing.module.ts

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

匹配控件.component.ts

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

基本统计控制.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>

匹配控件.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>

标签： angularroutingangular-routing

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

angular - Angular Routing：如何在新页面上呈现子级

问题描述

解决方案

推荐阅读