用* ng隐藏组件有时会留下奇怪的填充

Question

我试图根据自己的路线将标头隐藏在某些组件中。我的代码很简单，我只订阅路由，并检查它是否与正则表达式匹配我的路由

this._router.events.pipe(
  filter((event) => event instanceof NavigationEnd),
  takeUntil(this.onDestroy$)
).subscribe(
  x =>  {
  const regex = /\/courses\/(.\/*)/g;
  const match = regex.test(x['url']);
  this.showHeader = !match;
});

然后在模板中相应地渲染标题：

<app-layout-header *ngIf="showHeader"></app-layout-header>

现在大多数时候都可以按预期工作，但是有时我的浏览器无法正确渲染我的模板，而是在身体上留下了神秘的填充物：

我尝试将padding：0设置在我的身体上，但没有任何改变。另一种“ hack”可能是在我的特定组件中的内容上设置负的空白，但这将要求我也使用z-index，这使解决方案非常难看。

为什么我的页面无法正确显示？

Answer 1

能否将下面的部分代码包装在setTimeout（）中

const regex = /\/courses\/(.\/*)/g;
const match = regex.test(x['url']);
this.showHeader = !match;

Answer 2

我忘记了我在其他组件之一的打字稿中的滚动事件中向主体添加了填充。因此，当从该页面重定向时，它将留下空白。我通过将ngOnDestroy中的主体填充重置为0来修复它。