Angular 7-PrimeNg 7视图在调整窗口大小之前不会渲染

Question

我正在使用可正确使用Angular 5和PrimeNg 5的角度应用程序。

迁移到Angular 7和PrimeNg 7后，我在每个视图中都有一个问题：仅呈现一些基本的HTML元素，但不呈现任何与primeng相关的组件，并且在调整窗口大小后完全呈现。

有人有类似的问题吗？预先感谢。

更新

我一直在努力寻找解决方案，现在我可以提供一些代码，以防万一有人可以提供帮助（因为我发现在ngOnInit的最后一条指令中使用 setTimeout 可以解决此问题）：

我有一个app.component，它可以按预期运行，并且可以加载primeNg组件来解决问题。

该应用程序在登录屏幕中启动，在这里我也可以毫无问题地加载primeNg组件。登录后，我们回到家中，我已经完美地渲染了元素，包括primeNg元素。

该错误出现在该页面上的第一个自定义组件中，该组件包含primeNg组件，我从那里首先发现了问题。

奇怪的是，我设法通过在0秒的超时时间内包装该组件的最后ngOnInit语句来解决该问题。

HOME.COMPONENT.HMTL

<div id="main-menu" class="menu360"  #launcher *ngIf="(isOpen || isHome()) && viewLoaded">
<mat-card class="cs-card-padding" class="menu360-card">
    <div class="ui-row-fluid ui-row-fluid-top full-width">
        <div class="ui-col-fluid menu360-panel">
            <div class="ui-row-fluid">
                <mat-list role="list" *ngFor="let menu of filterEnabledItems()" class="ui-col-fluid ui-col-fluid-4 ui-col-fluid-xs-2 ui-col-fluid-md-3">
                    <a class="menu360-list" mat-list-item (click)="onCloseMenu(menu)" role="listitem" *ngIf="menu.action!=null" [routerLink]="[menu.action]" [pTooltip]="menu.texto" [tooltipDisabled]="disableTooltip">
                        <div class="menu360-item {{ menu.icon ? 'menu360-icon-' + menu.icon : '' }}" [ngClass]="{'menu360-icon': menu.icon}"></div>
                        <span class="menu360-label">{{menu.texto}}</span>
                    </a>
                    <a class="menu360-list" mat-list-item (click)="menuChange(menu)" role="listitem" *ngIf="menu.action==null" [pTooltip]="menu.texto" [tooltipDisabled]="disableTooltip">
                        <div class="menu360-item {{ menu.icon ? 'menu360-icon-' + menu.icon : '' }}" [ngClass]="{'menu360-icon': menu.icon}">
                            <div *ngIf="menu.parentList" class="menu360-back"></div>
                        </div>
                        <span class="menu360-label" [ngClass]="menu.parentList ? 'back-label' : ''">{{menu.texto}}</span>
                    </a>
                </mat-list>
            </div>
        </div>
        <div class="ui-col-fluid  menu360-overview">
            <div class="ui-col-fluid center menu360-action" (click)="toggleOverview()">
                <svg *ngIf="!isExpanded" width="76px" height="82px" viewBox="0 0 76 82" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <g id="arrow-left" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        "svg path..."
                    </g>
                </svg>
                <svg *ngIf="isExpanded" width="76px" height="82px" viewBox="0 0 76 82" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <g id="arrow-right" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        "svg path ..."
                    </g>
                </svg>
            </div>
            <dashboard *ngIf="overview === 'dashboard'" [isExpanded]="isExpanded"></dashboard>
        </div>
    </div>
</mat-card>

HOME.COMPONENT.TS

@Component({selector: 'home', templateUrl: './home.component.html'})

export class HomeComponent implements OnInit {
    @Input() isOpen: boolean;
    @Input() newStatusLauncher: any;
    @Output() closeMenu: EventEmitter<boolean> = new EventEmitter<boolean>();
    @Output() sendBreadcrumb = new EventEmitter();

    floatMenu = [];
    defaultMenu = [];
    isExpanded = false;
    overview: string;
   disableTooltip = true;
   viewLoaded = false;

   @ViewChild('launcher') launcher;

   constructor(private router: Router,
            private _MenuProviderService: MenuService,
            private _applicationRef: ApplicationRef) {
    router.events.subscribe(event => {
        if (event instanceof NavigationEnd) {
            this.reset();
        }
    });
}

ngOnInit() {
    this.initMenu();
}

initMenu() {
    const sessionId = sessionStorage.getItem('sessionId');
    const request: MenuRq = new MenuRq(sessionId, GlobalService.getPARAMS());

    this._MenuProviderService.obtenMenu(request).subscribe((menu) => {
        this.defaultMenu = menu;
        this.setMainMenu();
    });
}

isHome() {
    return this.router.url === '/home';
}

setMainMenu() {
    this.floatMenu = this.cloneArray(this.defaultMenu);
    this.overview = 'dashboard';
    this.viewLoaded = true;
}

cloneArray(data) {
    return data.map((element) => Object.assign({}, element));
}

refresh() {
    this._applicationRef.tick();
}

onToggleMenu(isOpen) {
    this.isOpen = typeof(isOpen) === 'boolean' ? isOpen : !this.isOpen;
}

onCloseMenu(menu) {
    this.onToggleMenu(false);
    this.closeMenu.emit(this.isOpen);
    this.sendBreadcrumb.emit({label: menu.texto, isActive: true});
    this.isExpanded = false;
}

menuChange(menuChange) {
    const submenus = menuChange.submenus;

    if (submenus && submenus.length > 0) {
        this.getActionSubmenu(menuChange.submenus, menuChange.texto);
    } else if (menuChange.parentList) {
        this.getActionGoBack(menuChange.parentList, menuChange.texto);
    }
    this.getOverview();
}

getActionSubmenu(submenus, label) {
    if (submenus && submenus.length > 0) {
        this.getGoBackOptionMenu(submenus);
        this.floatMenu = submenus;
        this.sendBreadcrumb.emit({
            label: label,
            floatMenu: submenus,
            isActive: true
        });
    }
}

getOverview() {
    const item = this.floatMenu.filter(menu => menu.overview);

    if (item.length > 0) {
        this.overview = item[0].overview;
    }
}

getActionGoBack(parentList, label) {
    this.floatMenu = parentList;
    this.sendBreadcrumb.emit({
        label: label,
        parentList: parentList,
        isActive: false
    });
}

getGoBackOptionMenu(list) {
    if (list[0].id !== 'go_back') {
        list.unshift({
            enabled: true,
            parentList: this.cloneArray(this.floatMenu),
            id: 'go_back',
            texto: 'Volver'
        });
    }
}

filterEnabledItems() {
    return this.floatMenu.filter(x => x.enabled);
}

toggleOverview() {
    this.launcher.nativeElement.classList.toggle('menu360-expanded');
    this.isExpanded = !this.isExpanded;
    this.disableTooltip = !this.disableTooltip;
}

reset() {
    this.isExpanded = false;
}
}

DASHBOARD.COMPONENT.HTML

<div class="layout-main dashboard">
<div class="card-form-title">
    Overview Reservas BP - {{fechaHoy | date:'dd/MM/yyyy HH:mm'}}
</div>
<div class="ui-row-fluid">
    <div class="ui-col-fluid {{ isExpanded ? 'ui-col-fluid-6 ui-col-fluid-sm-4 ui-col-fluid-md-3' : 'ui-col-fluid-6' }}">
        <label class="white-label">Hoteles seleccionados:</label>
        <gp-multiselect styleClass="full-width"
                                            [selectionLabel]="'Hoteles seleccionados'"
                                            defaultLabel="Todos los hoteles"
                                            [options]="hoteles.options"
                                            [(ngModel)]="hoteles.selection"></gp-multiselect>
    </div>
    <div class="ui-col-fluid {{ isExpanded ? 'ui-col-fluid-6 ui-col-fluid-sm-4 ui-col-fluid-md-2 ui-col-fluid-lg-1' : 'ui-col-fluid-6 ui-col-fluid-sm-3 ui-col-fluid-lg-2' }}">
        <button type="button" class="full-width ui-button-low-padded" label="Buscar" pButton icon="fa fa-search" (click)="filtrar()"></button>
    </div>
</div>
<div class="ui-separation-lg tabview-wrapper">
    <p-tabView #dashboard class="tabview-form tabview-menu">
        <p-tabPanel header="Gráfico">
            <div class="ui-row-fluid dashboard-kpi-group-separation">
                <div class="ui-col-fluid ui-col-fluid-narrow {{ isExpanded ? 'ui-col-fluid-6' : 'ui-col-fluid-12' }}">
                    <dashboard-grafico360 #chart1 class="full-width" [(titulo)]="tituloHoy" [data]="metricasHoy"
                        (filter)="setFiltrosHoy($event)"></dashboard-grafico360>
                </div>
                <div *ngIf="!isExpanded" class="card-separator full-width"></div>
                <div class="ui-col-fluid ui-col-fluid-narrow {{ isExpanded ? 'ui-col-fluid-6' : 'ui-col-fluid-12' }}">
                    <dashboard-grafico360 #chart2 class="full-width" [(titulo)]="tituloMes" [data]="metricasMes"
                        [fechaDesde]="fechppaDiaUno" [fechaHasta]="fechaAyer" (filter)="setFiltrosMes($event)"></dashboard-grafico360>
                </div>
            </div>
        </p-tabPanel>
    </p-tabView>
</div>

DASHBOARD.COMPONENT.TS

import {Component, OnDestroy, OnInit, ViewChild, Input} from '@angular/core';
import {GetHotelesRq, HotelService} from '@shared/services/hotel.service';
import {GPSelector} from 'gp-all-component';
import {
  GetGraficoFechasRq,
  GetGraficoOverviewRq,
  GraficoOverview,
  OverviewService
} from '@shared/services/overview.service';
import moment from 'moment';
import {Subject} from 'rxjs';
import {GpBaseComponent} from 'gp-all-component';

@Component({
  selector: 'dashboard',
  templateUrl: './dashboard.component.html',
  providers: [HotelService, OverviewService]
})

export class Dashboard360Component extends GpBaseComponent implements 
OnInit, OnDestroy {
  @ViewChild('chart1') chart1;
  @ViewChild('chart2') chart2;
  @Input() isExpanded: boolean;

  metricasHoy: any;
  metricasMes: any;
  metricasFecha: any;
  ...
  "every variable declarations..."
  ...

  constructor(private _hotelService: HotelService,
          private _overviewService: OverviewService) {
     super();

     this.dataObservable.subscribe(value => {
        if (!this.dataGraficoTotal) {
            this.dataGraficoTotal = value;
        } else {
            this.metricasFecha = this.convertToGraficoPorFecha(this.dataGraficoTotal.concat(value));
    this.chart3.cargarDatos(this.metricasFecha);
    this.dataGraficoTotal = null;
  }
});

}

 ngOnInit(): void {
    this.fechaDiaUno = moment().startOf('month').toDate();
    if (moment().isSame(moment(this.fechaDiaUno), 'day')) {
       this.fechaAyer = this.fechaHoy;
    } else {
       this.fechaAyer = moment().subtract(1, 'day').toDate();
    }
    const dias = moment().diff(moment(this.fechaDiaUno), 'days');
    this.tituloMes = (dias === 1 ? 'Último ' : 'Últimos ' + dias) + ((dias === 1) ? ' Día' : ' Días');
    setTimeout(() => {
       this.populateHoteles();
    }, 0);
  }

  ngOnDestroy(): void {
     this.cacheKeys.forEach(key => {
        sessionStorage.removeItem(key);
     });
     this.dataObservable.unsubscribe();
  }

  emitData(val) {
     this.dataObservable.next(val);
  }

  populateHoteles() {
     const rq = new GetHotelesRq('CRM');
     this._hotelService.getHoteles(rq).subscribe(data => {
     if (data.ok) {
      this.hoteles.cargarDatos(data.hoteles, 'codigo', ['codigo', 'nombre'], null, null, true);
      this.filtrar();
    } else if (data.error != null && data.error.errorMessage != null) {
      this.showErrorAlert(data.error.errorMessage);
      console.error(data.error.internalErrorMessage);
    }
  },
  error => {
    console.error(error);
  }
);
}

如您所见，我必须将ngOnInit中的this.populateHotels包装为超时才能解决该问题。但我想这不是正确的实现，必须有另一个更好的解决方案，使我不必处理超时。

我希望有人能帮助我。谢谢。