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

Question

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

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

我知道导航栏可以很容易地用 html like 导入<navbarComponent><navbarComponent>，但是侧边栏对我来说有点问题，因为我希望 app-content 位于侧边栏组件的右侧，所以我知道的唯一解决方案是在像这样的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;
}

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

标签： htmlcssangulartwitter-bootstrap

Answer 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>