Отображать детали под одним элементом в угловых

Question

Я использую angular 7 и bootstrap 4 для этого проекта.Я хочу получить подробную информацию по выбранному пункту.Вот скриншот, на котором я сейчас нахожусь.

и вот чего я хочу достичь.

В настоящее время я получаю сведения о команде внизу страницы, как вы можете видеть на первом рисунке, однако я хочу, чтобы детали команды были точнопод выбранной картой.

Вот мой код:

TeamListComponent

export class TeamListComponent implements OnInit {

  teams: any;

  constructor(private ts: TeamsService) { }

  ngOnInit() {
    this.ts.getTeams().subscribe(data=> {
      this.teams = data.teams;
    })
  }
}

TeamListTemplate;Примечание. В маршрутизаторе используется компонент сведений о команде.

<div class="container-fluid">
  <div class="row">
    <app-team *ngFor="let team of teams" [team]=team></app-team>
  </div>
<div class="row">
  <router-outlet></router-outlet>
</div>
</div>

компонент одной команды

export class TeamComponent{
      @Input() team: any;
}

шаблон команды: Примечание. Я использую карты начальной загрузки для отображения команды

<div class="card border-dark " style="width: 300px; height: 450px; margin: 10px;" [routerLink]="team.id"
     routerLinkActive="active">
  <img class="card-img-top embed-responsive" src="{{team.crestUrl}}" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">{{team.name}}</h5>
    <p class="card-text">{{team.address}}</p>
    <a href="{{team.website}}" class="btn btn-outline-dark btn-lg btn-block" target="_blank">Visit Website</a>
  </div>
</div>

Пожалуйста, предложите мне решение, если вам нужно больше деталей, пожалуйста, дайте мне знать.ТИА

Answer 1

Одним из способов решения этой проблемы является размещение вашего <team-detail></team-detail> внутри элемента <team></team>.Когда пользователь нажимает на него, отображается <team-detail></team-detail>, таким образом он будет отображаться под этим компонентом.

Другой способ - использовать <ng-content></ng-content> внутри <team></team>.И передать <team-detail></team-detail> следующим образом:

<team> <team-detail></team-detail> </team>

Answer 2

<div class="container-fluid">
  <div class="row">
    <app-team *ngFor="let team of teams" [team]=team></app-team>
    <div><router-outlet></router-outlet></div>
  </div>
</div>


Just place your router-outlet inside the same row and make some the adjustment according your need. Hope it will help