Почему кнопки в Angular становятся меньше при использовании директивы * ngIf?

Question

Итак, вот ситуация. У меня на боковой панели 5 кнопок. Только 4 появляются одновременно, та, которая соответствует странице, на которой вы находитесь, не отображается.

Пять кнопок: Домашняя страница, Тренеры, Контакты, Расписание и лагеря

Все маршруты, по которым эти кнопки переходят, являются дочерними путями главной страницы. Когда выбрана домашняя страница, все кнопки немного теряют свою ширину, а при выборе любого другого компонента кнопки имеют свою обычную ширину. Это происходит только в том случае, если * ngIfs, управляющий отображением кнопок, находится на своем месте. Если я удалю * ngIf из строки домашней страницы, все кнопки всегда будут иметь свой нормальный размер независимо от маршрута, если есть ngIf, размеры кнопок изменятся.

главная страница html:

 <div class="d-flex flex-column">
        <button *ngIf="selectedPage!='homepage'" type="button" class="btn btn-secondary btn-lg mt-5 py-4 px-5" (click)="navToHomePage()">
          Homepage
        </button>
        <button *ngIf="selectedPage!='timetable'" type="button" class="btn btn-secondary btn-lg mt-5 py-4 px-5" (click)="navToTimetable()">
          Timetable
        </button>
        <button *ngIf="selectedPage!='camps'" type="button" class="btn btn-secondary btn-lg mt-5 py-4 px-5" (click)="navToCamps()">
          Camps
        </button>
        <button *ngIf="selectedPage!='trainers'" type="button" class="btn btn-secondary btn-lg mt-5 py-4 px-5" (click)="navToTrainers()">
          Trainers
        </button>
        <button *ngIf="selectedPage!='contact'" type="button" class="btn btn-secondary btn-lg mt-5 py-4 px-5" (click)="navToContact()">
          Contact
        </button>
      </div>

Способы навигации на главной странице ts:

navToHomePage(){
    this.selectedPage = "homepage";
    this.router.navigate(["homepage"], { relativeTo: this.route });
  }

  navToTimetable() {
    this.selectedPage = "timetable";
    this.router.navigate(['timetable'], { relativeTo: this.route });
  }

  navToCamps() {
    this.selectedPage = "camps";
    this.router.navigate(['camps'], { relativeTo: this.route });
  }

  navToTrainers() {
    this.selectedPage = "trainers";
    this.router.navigate(['trainers'], { relativeTo: this.route });
  }

  navToContact() {
    this.selectedPage = "contact";
    this.router.navigate(['contact'], { relativeTo: this.route });
  } 

В роутере:

const routes: Routes = [
  { path: "", redirectTo: "/mainpage/camps", pathMatch: "full" },
  {
    path: "mainpage", component: MainPageComponent,
    children: [
      { path: 'homepage', component: HomePageComponent },
      { path: 'timetable', component: TimetableComponent },
      { path: 'camps', component: CampsComponent },
      { path: 'trainers', component: TrainersComponent },
      { path: 'contact', component: ContactComponent }
    ]
  },
];

Все остальные компоненты, которые отображаются при нажатии кнопок, идентичны вновь созданные компоненты без css и без logi c, у них просто есть собственное имя в html в теге <p>.

Если есть ngIf, кнопки, когда я ' м на /mainpage/homepage выглядят так:

Если выбрана другая кнопка, например та, которая ведет к /mainpage/contact:

Если ngIf отсутствует для домашней страницы, кнопки имеют нормальную ширину:

<button type="button" class="btn btn-secondary btn-lg mt-5 py-4 px-5" (click)="navToHomePage()">
  Homepage
</button>
<button *ngIf="selectedPage!='timetable'" type="button" class="btn btn-secondary btn-lg mt-5 py-4 px-5" (click)="navToTimetable()">
  Timetable
</button>
<button *ngIf="selectedPage!='camps'" type="button" class="btn btn-secondary btn-lg mt-5 py-4 px-5" (click)="navToCamps()">
  Camps
</button>
<button *ngIf="selectedPage!='trainers'" type="button" class="btn btn-secondary btn-lg mt-5 py-4 px-5" (click)="navToTrainers()">
  Trainers
</button>
<button *ngIf="selectedPage!='contact'" type="button" class="btn btn-secondary btn-lg mt-5 py-4 px-5" (click)="navToContact()">
  Contact
</button>

вот так:

Почему?

Answer 1

Это может быть из-за длины текста. Что касается публикации, когда присутствует домашняя страница, они имеют полную ширину. Поскольку вы используете flex, кнопка максимальной ширины определяет ширину других кнопок, поэтому кнопка home создает максимальную ширину. Чтобы избежать этого, вы можете установить постоянную ширину для всех кнопок.