Внедрение CSS на основе конфигурации и мерцания

Question

Просто интересно, кто-нибудь знает, как обойти эту проблему. Я добавляю внешние ссылки CSS к заголовку в AppComponent ngOnInit. Он работает нормально, однако страница ненадолго мерцает и отображает HTML, прежде чем добавить таблицы стилей. Я пытался скрыть HTML до после вставки ссылки, но все еще имеет такое же поведение. Вот код

import { Component, OnInit, Inject, AfterViewInit, ViewEncapsulation, OnDestroy  }  from '@angular/core';
import { Router, NavigationStart, NavigationEnd } from '@angular/router';
import { Title }     from '@angular/platform-browser';

import { ConfigurationService } from './services/configuration.service';
import { SessionService } from './services/session.service';
import { DOCUMENT } from '@angular/platform-browser';

import './operators';
import { InjectCssService } from './services/injectcss.service';

/**
 * This class represents the main application component.
 */
@Component({
  selector: 'app-root',
  encapsulation: ViewEncapsulation.None,
  template: `
      <div [hidden]="isLoading" class="router-output">
        <router-outlet></router-outlet>
      </div>
  `
})
export class AppComponent implements OnInit, AfterViewInit, OnDestroy  {
  isLoading : boolean;
  configService: ConfigurationService;

  constructor(
    @Inject(DOCUMENT) private document,
    private configurationService: ConfigurationService,
    private injectCssService: InjectCssService,
    private sessionService: SessionService,
    private router: Router,
    private titleService: Title,
  ) {
    this.configService = configurationService;
    this.isLoading = configurationService.isLoading;
    sessionService.Initialize();

    titleService.setTitle(configurationService.config.title);
  }

  ngOnInit() {
    Object.keys(this.configurationService.config.cssUrls).map(url => {
      let head = this.document.getElementsByTagName('head')[0];
      let style = head.getElementsByTagName('link')[1];
      let link = this.injectCssService.createLink(this.configurationService.config.cssUrls[url]);
      console.log(link);
      head.appendChild(link);
    });
  }

  ngOnDestroy() {
    this.isLoading = false;
  }
}

Answer 1

Angular загружает данные асинхронно, получая данные через веб-сервис перед отображением страницы. Может быть заметное мерцание, когда страница загружает таблицы стилей, вызывает веб-сервис и отображает DOM.

Чтобы обойти это, вы можете настроить защитные устройства разрешения данных, чтобы данные полностью загружались до изменения маршрута. Это позволяет компоненту загружать и отображать данные без ожидания; тем самым значительно минимизируя эффект мерцания.

Вот пример маршрута:

export const routes: Routes = [
    { path: '', component: MainComponent, resolve: { data: MyDataResolver } 
}]

MyDataResolver.ts

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { MyDataService } from './mydata.service';

@Injectable()
export class MyDataResolver implements Resolve<MyData> {

  constructor(private myDataService: MyDataService) {}

  resolve(route: ActivatedRouteSnapshot) {
    return this.myDataService.getData();
  }
}

app.module.ts

@NgModule({
  ...
  providers: [
    MyDataService,
    MyDataResolver
  ]
})
export class AppModule {}

main.component.ts

@Component()
export class MainComponent implements OnInit {

  mydata: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.mydata= this.route.snapshot.data['data'];
  }
}

Подробнее о средствах разрешения данных: https://blog.thoughtram.io/angular/2016/10/10/resolving-route-data-in-angular-2.html