angular - 角度添加影响页面布局的`resolve`防护

Question

我正在尝试向组件添加解析。但是当我添加解析时，如果影响页面布局。该组件可能获得absolute位置并脱离parent component网格。知道如何解决这个问题。当我删除解决方案时，一切正常。

以下是路由配置

        path: 'wizardStack',
        component: WizardStackComponent,
        outlet: 'wizardOutlet',

        resolve: {
          stack: StackResolveService
        },

        data: {
          slide: false
        }

以下是解决服务

import { Injectable } from '@angular/core';
import { Resolve, Router } from '@angular/router';
import { ActivityService } from 'src/app/activity.service';
import { of, EMPTY, Observable, from } from 'rxjs';
import { take, mergeMap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class StackResolveService implements Resolve<any> {

  constructor(private activityService: ActivityService,
              private router: Router) { }

  resolve(): Observable<any[]> {
    return from(this.activityService.getStack()).pipe(
      take(1),
      mergeMap((crisis) => {
        if (crisis) {
          return of(crisis);
        } else {
          this.router.navigateByUrl('/');
          return EMPTY;
        }
      })
    );
  }
}

以下是组件

<div class="contentContainer">
  <div class="content">
    <div class="wizard-step">
      <div class="header">
        <p>Stack works</p>
      </div>
    </div>
  </div>
</div>