Angular 弹性布局挑战

Question

我有一个 angular 应用程序 (v6.1)，它使用 angular flex & Angular flex-layout。我正在使用 angular v6.1 来利用片段滚动功能。我的页面有一个工具栏、带有页面内片段链接的侧面导航和一个中心内容（见下图）。我的要求是固定工具栏和左侧导航，而仅中心内容应该滚动。以下是我的app.component.html。使用此 html，整个页面滚动，而不仅仅是中心内容。我怎样才能达到预期的行为？

app.component.html

<div  fxLayout="column">
  <div fxFlex="20%" fxFlexFill style="background-color: rgb(48, 138, 133); ">
      <mat-toolbar color="primary">
        <mat-toolbar-row fxLayoutGap="10px">
          <a type="button" href="#one">Menu item #1</a>
          <a type="button" href="#two">Menu item #2</a>
        </mat-toolbar-row>
      </mat-toolbar>
  </div>
  <div fxFlex="80%">
    <div fxLayout="row" style="background-color: cadetblue">
      <div fxFlex="20%" fxLayout="column" style="background-color: chocolate">
        <a mat-button routerLink="./" routerLinkActive="active" fragment="one">Nav Link #1</a>
        <a mat-button routerLink="./" routerLinkActive="active" fragment="two">Nav Link #2</a>
        <a mat-button routerLink="./" routerLinkActive="active" fragment="three">Nav Link #3</a>
        <a mat-button routerLink="./" routerLinkActive="active" fragment="four">Nav Link #4</a>
        <a mat-button routerLink="./" routerLinkActive="active" fragment="five">Nav Link #5</a>
      </div>
      <div fxLayout="column" fxLayoutGap="100px" fxFlex="100%"
        style="background-color: chartreuse;">
        <p id="one">para 1</p>
        <p id="two">para 2</p>
        <p id="three">para 3</p>
        <p id="four">para 4</p>
        <p id="five">para 5</p>
        <p id="six">para 6</p>
        <p id="seven">para 7</p>
        <p id="eight">para content 8</p>
      </div>
    </div>
  </div>
</div>

Answer 1

做你需要的最好的方法之一是通过将 sidenav 和工具栏创建为单独的组件并在 body 中渲染子组件（绿色区域）就像

<header role="mast-head">
   <div class="container-fluid">
      //Your header will come here 
   </div>
</header>
<div class="side bar">
   <ul>
      <li routerLinkActive="active" [routerLink]="['/homepage/h']"><a href="javascript:"><img src="" alt="" />Dashboard</a></li>
      <li routerLinkActive="active" [routerLink]="['/homepage/dst']"><a href="javascript:"><img src="" alt="" />A</a></li>
      <li routerLinkActive="active" [routerLink]="['/homepage/j']"><a href="javascript:"><img src="" alt="" />B </a></li>
   </ul>
</div>
<div class="body">
   <router-outlet >     
   </router-outlet>
</div>

Answer 2

好的。要完成这项工作，您需要做一些事情。

首先，您需要确保 body 的身高为 100%。否则，每当一个元素被赋予 100% 的高度时，它就不会知道“100% 的是什么”，它会随心所欲地增长。

接下来您需要在几个地方添加此样式：height: 100%; overflow: auto。这表示 "the element fills it's parent, and if the content grows any bigger, make the content scrollable"。具体来说，将这些样式添加到两个内部列中。

stackblitz with result

Angular 弹性布局挑战

Angular flex layout challenge

html

css

angular

angular-material

angular-flex-layout