当使用*ngIf指令时，为什么Angular中的按钮变小了？

Question

情况就是这样。我在侧边栏上有5个按钮。一次只显示4个页面，不会显示与您当前所在页面对应的页面。

这五个按钮是:主页、培训师、联系人、时间表和营地

这些按钮导航到的所有路径都是主页的子路径。当主页被选中时，所有的按钮都会失去一些宽度，而在选择任何其他组件时，按钮都会保持正常的宽度。只有当控制显示哪些按钮的*ngIf已经就位时，才会发生这种情况。如果我从主页的行移除*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，也没有逻辑，它们只是在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，所以最大宽度按钮决定了其他按钮的宽度，所以other按钮创建了最大宽度。为了避免这种情况，您可以为所有按钮设置恒定宽度。