要解决Angular 7中router-outlet设置的高度大于窗口的问题,可以使用CSS的方式来调整高度。
首先,在你的组件的CSS文件中,为router-outlet设置一个最大高度,并将overflow属性设置为auto,以便在内容溢出时出现滚动条。例如:
.router-outlet {
max-height: calc(100vh - 100px);
overflow: auto;
}
上述代码将为router-outlet设置一个最大高度为窗口高度减去100px,并在内容溢出时显示滚动条。
然后,在你的组件的HTML文件中,将router-outlet包裹在一个具有固定高度的父元素中,以确保它不会超出窗口高度。例如:
最后,在你的组件的CSS文件中,为router-outlet-wrapper设置一个固定高度。例如:
.router-outlet-wrapper {
height: calc(100vh - 100px);
}
上述代码将为router-outlet-wrapper设置一个固定高度为窗口高度减去100px。
通过以上步骤,你可以限制router-outlet的高度,确保它不会超出窗口高度,并在内容溢出时显示滚动条。你可以根据你的需求来调整最大高度和固定高度的数值。