将固定的导航栏和侧边栏放在 Angular 应用程序的所有组件中答案

【问题标题】：Put fixed navbar and sidebar in all components of Angular app将固定的导航栏和侧边栏放在 Angular 应用程序的所有组件中
【发布时间】：2021-06-28 10:04:25
【问题描述】：

所以，我是 Angular 的新手，我正在构建一个新的 Angular 应用程序，它将由多个组件组成，我希望导航栏和侧边栏固定在我的应用程序的所有组件上。

我将导航栏和侧边栏构建为单独的组件。我希望导航栏和侧边栏是这样的，应用内容（所有组件内容）位于屏幕的白色部分：

我知道导航栏可以很容易地用像<navbarComponent><navbarComponent>这样的html来导入，但是侧边栏对我来说有点问题，因为我希望应用程序内容位于侧边栏组件的右侧，所以我知道的唯一解决方案就是像这样在css中制作一个容器：

随机组件-html：

<app-navigation-bar></app-navigation-bar>
<div class="d-flex container1">
  <div class="al-left">
<app-sidenav-bar></app-sidenav-bar>
</div>
<div class="al-right">
<div class="container">
<h2>Apps:</h2>

<mat-nav-list>
    <mat-list-item *ngFor="let app of apps"  (click)="redirect(app)"> 
       <button mat-icon-button> {{app.name}}
  
       </button>
    </mat-list-item>
  </mat-nav-list>
</div>
</div>
</div>

随机组件css：

.container1{
    width: 100%;
}

.al-left{
    float: left;
    max-width: 15vw;
}

.al-right{
    float: right;
    max-width: 85vw;
}

但我觉得必须有更简单的方法来做到这一点。有人知道解决办法吗？

【问题讨论】：

标签： html css angular twitter-bootstrap

【解决方案1】：

你可以route这个white block中的所有其他组件

让我们说：

<app-navigation-bar></app-navigation-bar>
<div class="d-flex container1">
  <div class="al-left">
      <app-sidenav-bar></app-sidenav-bar>
  </div>
    <div class="al-right">
        <div class="container">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

【讨论】：