Угловая маршрутизация: как отрендерить ребенка на новой странице - PullRequest
Новая
       29

Угловая маршрутизация: как отрендерить ребенка на новой странице

0 голосов
/ 30 сентября 2019

Я пытаюсь загрузить свой дочерний компонент (BasicStatControlComponent) на новую страницу, когда нажимаю кнопку (на match-controls.component.html). Однако вместо рендеринга 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. Нет ошибок через консоль

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>

1 Ответ

0 голосов
/ 30 сентября 2019 
const routes: Routes = [
  { 
    path: '', 
    component: MatchControlsComponent,
    children:
    [
      { path: "", redirectTo: "match-controls" },
      { path: "players-list", component: BasicStatControlComponent },
    ] 
  }
];

Путь должен быть написан без /, т. Е. players-list

Вы написали /players-list вместо players-list

...