在Angular应用的所有组件中放置固定的导航栏和侧边栏

Question

所以，我是一个新的角度和建设一个新的角度应用程序，这将由多个组件，我希望导航栏和侧边栏是固定在我的应用程序的所有组件。

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

​

​

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

random-component-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>

random-component-css：

.container1{
    width: 100%;
}

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

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

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

Answer 1

您可以对此white block中的所有其他组件执行route

让我们说：

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