angular - 角度 6 中左侧菜单之前的页面加载

Question

我有一个角度项目。我的问题是；当我启动应用程序时，我的页面在左侧菜单之前加载。但我想，首先加载左侧菜单，然后加载我的页面。我的错误可能是什么原因？

app.menu.component.ts

 @Component({
      selector: 'app-menu',
      templateUrl: './app.menu.component.html'
    })
    export class AppMenuComponent implements OnInit {

      @Input() reset: boolean;

      model: any[];
      menuItems: MenuObject[];

      constructor(public app: AppComponent, private userService: UserService, public publish: MenuLayoutComponent, private route: ActivatedRoute, private ch: CommonHelper) { }

      ngOnInit() {
        this.createMenu();
      }

      createMenu() {
        this.userService.getMenuItems().subscribe(result => {
          this.menuItems = result.data;

          this.model = [];

          if (this.menuItems.length > 0) {

            this.model = [{
              label: this.menuItems[0].moduleName, icon: 'fa fa-fw fa-' + this.menuItems[0].moduleIcon,
              items: []
            }];

            for (let i = 0; i < this.menuItems.length; i++) {
              this.model[0].items.push({ label: this.menuItems[i].menuItemName, icon: 'fa fa-fw fa-circle-o', routerLink: [this.menuItems[i].route] });
            }
          }

        });
      }
    }
@Component({
  /* tslint:disable:component-selector */
  selector: '[app-submenu]',
  /* tslint:enable:component-selector */
  template: `
        <ng-template ngFor let-child let-i="index" [ngForOf]="(root ? item : item.items)">
            <li [ngClass]="{'active-menuitem': isActive(i)}" [class]="child.badgeStyleClass" *ngIf="child.visible === false ? false : true">
                <a [href]="child.url||'#'" (click)="itemClick($event,child,i)" (mouseenter)="onMouseEnter(i)"
                   class="ripplelink" *ngIf="!child.routerLink"
                    [attr.tabindex]="!visible ? '-1' : null" [attr.target]="child.target">
                    <i [ngClass]="child.icon"></i><span>{{child.label}}</span>
                    <i class="fa fa-fw fa-angle-down menuitem-toggle-icon" *ngIf="child.items"></i>
                    <span class="menuitem-badge" *ngIf="child.badge">{{child.badge}}</span>
                </a>

                <a (click)="itemClick($event,child,i)" (mouseenter)="onMouseEnter(i)" class="ripplelink" *ngIf="child.routerLink"
                    [routerLink]="'/'+child.routerLink" routerLinkActive="active-menuitem-routerlink"
                   [routerLinkActiveOptions]="{exact: true}" [attr.tabindex]="!visible ? '-1' : null" [attr.target]="child.target">
                    <i [ngClass]="child.icon"></i><span>{{child.label}}</span>
                    <i class="fa fa-fw fa-angle-down menuitem-toggle-icon" *ngIf="child.items"></i>
                    <span class="menuitem-badge" *ngIf="child.badge">{{child.badge}}</span>
                </a>
                <div class="layout-menu-tooltip">
                    <div class="layout-menu-tooltip-arrow"></div>
                    <div class="layout-menu-tooltip-text">{{child.label}}</div>
                </div>
                <div class="submenu-arrow" *ngIf="child.items"></div>
                <ul app-submenu [item]="child" *ngIf="child.items" [visible]="isActive(i)" [reset]="reset" [parentActive]="isActive(i)"
                    [@children]="(publish.isSlim()||publish.isHorizontal())&&root ? isActive(i) ?
                     'visible' : 'hidden' : isActive(i) ? 'visibleAnimated' : 'hiddenAnimated'"></ul>
            </li>
        </ng-template>
    `,
  animations: [
    trigger('children', [
      state('hiddenAnimated', style({
        height: '0px'
      })),
      state('visibleAnimated', style({
        height: '*'
      })),
      state('visible', style({
        display: 'block'
      })),
      state('hidden', style({
        display: 'none'
      })),
      transition('visibleAnimated => hiddenAnimated', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
      transition('hiddenAnimated => visibleAnimated', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
    ])
  ]
})
export class AppSubMenuComponent {

  @Input() item: MenuItem;

  @Input() root: boolean;

  @Input() visible: boolean;

  _reset: boolean;

  _parentActive: boolean;

  activeIndex: number;

  constructor(public app: AppComponent, public publish: MenuLayoutComponent) { }

  itemClick(event: Event, item: MenuItem, index: number) {
    if (this.root) {
      this.publish.menuHoverActive = !this.publish.menuHoverActive;
    }

    // avoid processing disabled items
    if (item.disabled) {
      event.preventDefault();
      return true;
    }

    // activate current item and deactivate active sibling if any
    this.activeIndex = (this.activeIndex === index) ? null : index;

    // execute command
    if (item.command) {
      item.command({ originalEvent: event, item: item });
    }

    // prevent hash change
    if (item.items || (!item.url && !item.routerLink)) {
      setTimeout(() => {
        this.publish.layoutMenuScrollerViewChild.moveBar();
      }, 450);
      event.preventDefault();
    }

    // hide menu
    if (!item.items) {
      if (this.publish.isHorizontal() || this.publish.isSlim()) {
        this.publish.resetMenu = true;
      } else {
        this.publish.resetMenu = false;
      }

      this.publish.overlayMenuActive = false;
      this.publish.staticMenuMobileActive = false;
      this.publish.menuHoverActive = !this.publish.menuHoverActive;
    }
  }

  onMouseEnter(index: number) {
    if (this.root && this.publish.menuHoverActive && (this.publish.isHorizontal() || this.publish.isSlim())
      && !this.publish.isMobile() && !this.publish.isTablet()) {
      this.activeIndex = index;
    }
  }

  isActive(index: number): boolean {
    return this.activeIndex === index;
  }

  @Input() get reset(): boolean {
    return this._reset;
  }

  set reset(val: boolean) {
    this._reset = val;

    if (this._reset && (this.publish.isHorizontal() || this.publish.isSlim())) {
      this.activeIndex = null;
    }
  }

  @Input() get parentActive(): boolean {
    return this._parentActive;
  }

  set parentActive(val: boolean) {
    this._parentActive = val;

    if (!this._parentActive) {
      this.activeIndex = null;
    }
  }
}

app.menu.component.html

<ul app-submenu [item]="model" root="true" class="layout-menu layout-main-menu clearfix" [reset]="reset" visible="true" parentActive="true"></ul>

菜单布局.component.ts

@Component({
  selector: 'app-menu-layout',
  templateUrl: './menu-layout.component.html',
  styleUrls: ['./menu-layout.component.css']
})

export class MenuLayoutComponent implements AfterViewInit {

  layoutMode: MenuOrientation = MenuOrientation.STATIC;
  darkMenu = true;
  profileMode = 'inline';
  rotateMenuButton: boolean;
  topbarMenuActive: boolean;
  overlayMenuActive: boolean;
  staticMenuDesktopInactive: boolean;
  staticMenuMobileActive: boolean;
  layoutMenuScroller: HTMLDivElement;
  menuClick: boolean;
  topbarItemClick: boolean;
  activeTopbarItem: any;
  resetMenu: boolean;
  menuHoverActive: boolean;

  @ViewChild('layoutMenuScroller') layoutMenuScrollerViewChild: ScrollPanel;

  constructor(public renderer: Renderer2, private userService: UserService, private route: ActivatedRoute, public ch: CommonHelper) { }

  ngOnInit() {
  }

  ngAfterViewInit() {
    setTimeout(() => { this.layoutMenuScrollerViewChild.moveBar(); }, 100);
  }

  onLayoutClick() {
    if (!this.topbarItemClick) {
      this.activeTopbarItem = null;
      this.topbarMenuActive = false;
    }

    if (!this.menuClick) {
      if (this.isHorizontal() || this.isSlim()) {
        this.resetMenu = true;
      }

      if (this.overlayMenuActive || this.staticMenuMobileActive) {
        this.hideOverlayMenu();
      }

      this.menuHoverActive = false;
    }

    this.topbarItemClick = false;
    this.menuClick = false;
  }

  onMenuButtonClick(event) {
    this.menuClick = true;
    this.rotateMenuButton = !this.rotateMenuButton;
    this.topbarMenuActive = false;

    if (this.layoutMode === MenuOrientation.OVERLAY) {
      this.overlayMenuActive = !this.overlayMenuActive;
    } else {
      if (this.isDesktop()) {
        this.staticMenuDesktopInactive = !this.staticMenuDesktopInactive;
      } else {
        this.staticMenuMobileActive = !this.staticMenuMobileActive;
      }
    }

    event.preventDefault();
  }

  onMenuClick($event) {
    this.menuClick = true;
    this.resetMenu = false;

    if (!this.isHorizontal()) {
      setTimeout(() => { this.layoutMenuScrollerViewChild.moveBar(); }, 450);
    }
  }

  onTopbarMenuButtonClick(event) {
    this.topbarItemClick = true;
    this.topbarMenuActive = !this.topbarMenuActive;

    this.hideOverlayMenu();

    event.preventDefault();
  }

  onTopbarItemClick(event, item) {
    this.topbarItemClick = true;

    if (this.activeTopbarItem === item) {
      this.activeTopbarItem = null;
    } else {
      this.activeTopbarItem = item;
    }

    event.preventDefault();
  }

  onTopbarSubItemClick(event) {
    event.preventDefault();
  }

  hideOverlayMenu() {
    this.rotateMenuButton = false;
    this.overlayMenuActive = false;
    this.staticMenuMobileActive = false;
  }

  isTablet() {
    const width = window.innerWidth;
    return width <= 1024 && width > 640;
  }

  isDesktop() {
    return window.innerWidth > 1024;
  }

  isMobile() {
    return window.innerWidth <= 640;
  }

  isOverlay() {
    return this.layoutMode === MenuOrientation.OVERLAY;
  }

  isHorizontal() {
    return this.layoutMode === MenuOrientation.HORIZONTAL;
  }

  isSlim() {
    return this.layoutMode === MenuOrientation.SLIM;
  }

  changeToStaticMenu() {
    this.layoutMode = MenuOrientation.STATIC;
  }

  changeToOverlayMenu() {
    this.layoutMode = MenuOrientation.OVERLAY;
  }

  changeToHorizontalMenu() {
    this.layoutMode = MenuOrientation.HORIZONTAL;
  }

  changeToSlimMenu() {
    this.layoutMode = MenuOrientation.SLIM;
  }
}

菜单布局.component.html

<div class="layout-wrapper" (click)="onLayoutClick()"
     [ngClass]="{'menu-layout-static': !isOverlay(),
                'menu-layout-overlay': isOverlay(),
                'layout-menu-overlay-active': overlayMenuActive,
                'menu-layout-horizontal': isHorizontal(),
                'menu-layout-slim': isSlim(),
                'layout-menu-static-inactive': staticMenuDesktopInactive,
                'layout-menu-static-active': staticMenuMobileActive}">

  <div class="loading-screen" style="z-index:2147483646" *ngIf="ch.globals.displayLoader">
    <div class="loading-loader"></div>
  </div>

  <app-topbar></app-topbar>

  <div class="layout-menu-container" [ngClass]="{'layout-menu-dark':darkMenu}" (click)="onMenuClick($event)">
    <p-scrollPanel #layoutMenuScroller [style]="{height: '100%' }">
      <div class="menu-scroll-content">
        <app-menu [reset]="resetMenu"></app-menu>
      </div>
    </p-scrollPanel>
  </div>

  <div class="layout-main">
    <router-outlet></router-outlet>
  </div>

  <div class="layout-mask"></div>

</div>

很抱歉有很多代码，但我不想破坏代码的完整性。

标签： angulartypescriptangular6