Question

我想使所有通过路由器出口添加的组件都使用flexbox占用页面的所有可用高度和宽度。感谢ToolmakerSteve's answer的“如何使嵌套的Flexbox发挥作用”，我知道可以使用以下基本的HTML和CSS达到所需的结果：

HTML：

<div id="flexbox-outer">
  <div id="flexbox-middle">
    <div id="flexbox-inner">    
    </div>
  </div>
</div>

CSS：

html, body {
  height : 100%; 
  width  : 100%;
}
.flexbox-outer {
  display        : flex;
  flex-direction : column;
}
.flexbox-middle {
  flex           : 1;
  display        : flex;
  flex-direction : column;
}
.flexbox-inner {
  flex: 1;
}

但是，当我将这些类应用于基本的Angular应用程序时，带有div类的flex-box-inner并不会占据页面的整个高度。以下是无法正常工作的代码（和stackblitz of the issue）的示例：

index.html和app.component.html（在此处合并）：

<html>
<body>
  <app-root>
    <div class="flexbox-outer">
      <div class="flexbox-middle">
        <router-outlet></router-outlet>
      </div>
    </div>
  </app-root>
</body>
</html>

foo.component.html：

<div class="flexbox-inner">
  This should take up the entire width and height of the page.
</div>

如何获取foo.component.html模板的内容来占据页面的整个高度？

Answer 1

经过一番检查，我了解到通过router-outlet添加的组件不会替换router-outlet，而是在router-outlet的同一级别添加了它们自己的宿主元素。因此，我认为的文档结构是这样呈现的：

<html>
<body>
  <app-root>
    <div class="flexbox-outer">
      <div class="flexbox-middle">
        <!-- Removed, and replaced with contents of foo.component.html? -->
        <!--            <router-outlet></router-outlet>                 -->
        <div class="flexbox-inner">
          This should take up the entire width and height of the page.
        </div>
      </div>
    </div>
  </app-root>
</body>
</html>

实际上是这样渲染的：

<html>
<body>
  <app-root>
    <div class="flexbox-outer">
      <div class="flexbox-middle">
        <router-outlet></router-outlet>
        <foo>
          <div class="flexbox-inner">
            This should take up the entire width and height of the page.
          </div>
        </foo>
      </div>
    </div>
  </app-root>
</body>
</html>

因此，要使所有这些都起作用并使foo.component.html的内容填充页面的高度，我只需要向flexbox-middle的宿主元素添加FooComponent类像这样：

@Component({
  selector    : 'app-foo',
  templateUrl : './foo.component.html',
  host        : { 'class': 'flexbox-middle' }
})
export class FooComponent { }

here中提供了工作结果的完整代码。

Answer 2

您也可以申请if (!Character.toLowerCase(student[i]) == Character.toLowerCase(correct[i]))来涵盖if (!Character.toUpperCase(student[i]) == Character.toUpperCase(correct[i]))

css to app-foo

如何在Angular组件中使用嵌套的flexbox？

2 个答案: