如何避免在Angular 2 + PrimeNG中的數據加載之前加載UI？

我是Angular 2中的新成員，我也使用PrimeNG。如何避免在Angular 2 + PrimeNG中的數據加載之前加載UI？

只是爲了說明發生了什麼，我重複了「Configurações」選項卡，就像您在圖像上看到的一樣。

這兩個選項卡具有完全相同的代碼，但行爲不同。第一個沒有正確加載切換。第二個工作正常。

我的HTML：

<p-tabView orientation="left"> 
    <p-tabPanel header="Administrador"> 
     <p-growl [value]="msgs"></p-growl> 
     <p-dataTable [value]="tblColabAdminList"> 
      <p-column field="snomatrcompl" header="Matrícula"></p-column> 
      <p-column field="nflativo" header="Status" styleClass="col-button"> 
       <template let-tblColabAdmin="rowData" pTemplate type="body"> 
        <p-inputSwitch onLabel="ativo" offLabel="inativo" (click)="selectAdmin(tblColabAdmin)" [(ngModel)]="tblColabAdmin.nflativo"></p-inputSwitch> 
       </template> 
      </p-column> 
     </p-dataTable> 
    </p-tabPanel> 
</p-tabView>

它是我的打字稿：

import { Component, OnInit } from '@angular/core'; 
import { ConfigService } from './config/configService'; 
import { TblColabAdmin } from './config/TblColabAdmin'; 
import { Message } from 'primeng/primeng'; 

@Component({ 
    templateUrl: 'app/app.config.html', 
    selector: 'config-app', 
    providers: [ConfigService] 
}) 
export class AppConfig implements OnInit { 
    private errorMessage: string; 

    tblColabAdminList: TblColabAdmin[]; 

    msgs: Message[] = []; 

    constructor(
     private configService: ConfigService) { 
    } 

    ngOnInit() { 
     this.getConfig(); 
    } 

    getConfig() { 
     this.configService.getTblColabAdmin().subscribe(
      tblColabAdminList => this.tblColabAdminList = tblColabAdminList, 
      error => this.errorMessage = <any>error 
     ); 
    } 

    selectAdmin(tblColabAdmin: TblColabAdmin) { 
     this.msgs = []; 
     this.msgs.push({ severity: 'info', summary: 'Administrador selecionado', detail: 'Matrícula: ' + tblColabAdmin.snomatrcompl }); 
    } 
}

我認爲，在第一標籤中的UI被前裝數據。

但是，爲什麼會發生，以及如何解決？謝謝！

來源

2016-11-25 Marcel Jacques Machado

我不確定你使用的是什麼樣的後端，但有這樣的事情，路由器數據解析器，可以幫助https://angular.io/api/router/Resolve Angular大學有示例https://angular-university.io/lesson/angular-rxjs-reactive-patterns-implementing-a-router-data-resolver-introducing-typescript-tuple-types – JGFMK

一週後，我終於找到了解決辦法。我不知道這是否是最好的方法，但效果很好：

首先，我添加<div id="tab" style="display:none">到我的HTML：

<div id="tab" style="display:none"> 
    <p-tabView orientation="left"> 
    ... 
    </p-tabView> 
</div>

其次，我在我的打字稿增加了一個setTimeout在style改變display值1秒後：

... 
this.configService.getTblColabAdmin().subscribe(
    tblColabAdminList => this.tblColabAdminList = tblColabAdminList, 
    error => this.errorMessage = <any>error, 
    () => { 
     setTimeout(() => { 
      document.getElementById("tab").setAttribute("style", "display:true"); 
     }, 1000); 
    } 
); 
...

而就是這樣。謝謝你，上帝=）

來源

2016-12-02 20:44:33

您可以在您的Angular組件中收聽ngAfterViewInit()。

import { Component,AfterViewInit} from '@angular/core' 

@Component({ 
    templateUrl: 'app/app.config.html', 
    selector: 'config-app', 
}) 
export class ContentComponent implements AfterViewInit { 

    ngAfterViewInit(){ 
     ... do stuff here 
    } 
}

如果這沒有幫助，你可以在你的根組件上ngOnInit()引發一個事件，並聽它在你的組件。

@Component(selector: 'app-element') 
@View(
    templateUrl: 'app_element.html', 
) 
class AppElement implements OnInit { 
    ElementRef elementRef; 
    AppElement(this.elementRef); 

    void ngOnInit() { 
     DOM.dispatchEvent(elementRef.nativeElement, new CustomEvent('angular-ready')); 
    } 
}

來源

2016-11-25 00:33:22 Yaser

嗨。感謝您的答案，但ngAfterViewInit沒有幫助。我不確定如何使用dispatchEvent。 –

如何避免在Angular 2 + PrimeNG中的數據加載之前加載UI？

回答

相關問題