Ionic3 - правильный способ оформления заголовков

Question

У нас есть проект Ionic 3, в котором мы внесли большие изменения в стиль заголовка по умолчанию.Каждому элементу ion-header присваивается класс «big-header», который обновляет цвет, расположение кнопок и высоту заголовка.Стиль применяется в файле app.scss.

Обновления стиля заголовка, по-видимому, оказывают значительное влияние на производительность.Также похоже, что стиль может быть применен после загрузки вида.Существует краткий «сбой», когда используется старая высота по умолчанию.

Есть ли «правильный» способ изменить заголовок, который немного более дружественен к ресурсам?

---

Для справки, здесь применяется CSS:

/* Header Overwrite */
ion-header.big-header {
    border-bottom: none !important;
    /*box-shadow: 0px 4px 17px rgba(0,0,0,0.30);*/
    .bar-buttons-md[end] {
        float:right;
        padding-top:4px;
        padding-right:4px;
    }
    ion-navbar.toolbar {
        display:block;
    }
    ion-buttons, .bar-button-menutoggle {
        display:inline-block;
        width:50%;
        margin:0px;
    }
    .toolbar-title-md {
        font-size:36px !important;
        padding-top:16px !important;
        font-weight:normal !important;
        overflow:visible !important;
    }
    .toolbar-md {
        min-height: 112px;
        .toolbar-background {
            background-color: #019ae8 !important;
            background: #019ae8 !important;
        }
        ion-icon {
            display:block;
        }
        ion-icon:before {
            color: #FFFFFF !important;
        }
        .bar-button-menutoggle {
            padding-top:12px;
            padding-left:12px;
            text-align:left !important;
            .button-inner {
                display:block;
            }
        }
    }
    .header-note {
        position: absolute;
        bottom: 0px;
        margin: 0px;
        font-size: 10px;
        width: 100%;
        text-align: right;
        padding-bottom: 5px;
        padding-right: 8px;
        color: white;
    }
    .big-header-descriptor {
        display:none;
        position: absolute;
        top: 2px;
        font-size: 14px;
        text-transform:uppercase;
    }
}

Answer 1

вы можете создать общий пользовательский компонент заголовка.

<ion-navbar>
  <button *ngIf="header_data.ismenu" ion-button icon-only menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <button *ngIf="header_data.ishome" class="algo-header-home-icon" ion-button icon-only (click)="homeClick()">
    <ion-icon class="ion-home" name="home"></ion-icon>
  </button>
  <ion-title class="header-title" [ngClass]="{'ishome-title': header_data.ishome,'ismeun-centre': !header_data.ishome}">
    {{header_data.title}}
  </ion-title>
</ion-navbar>

import { Component,Input } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HomePage } from '../../pages/home/home';

@Component({
  selector: 'custom-header',
  templateUrl: 'custom-header.html'
})
export class CustomHeaderComponent {
  header_data: any;
  constructor(public navCtrl: NavController) {}
  @Input()
  set header(header_data: any) {
    this.header_data=header_data;
  }
  get header() {
    return this.header_data;
  }
  homeClick() {
    this.navCtrl.setRoot(HomePage);
  }
}

И использовать тот же компонент на странице приложения

<ion-header><custom-header [header]="header_data"></custom-header></ion-header>
 <ion-content padding class="page-home">
   <p>Home Page</p>
 </ion-content>

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  header_data:any;
  constructor(public navCtrl: NavController) {
    this.header_data={ismenu:true,ishome:false,title:"Home"};
  }
}

Мы должны максимально избегать пользовательских стилей CSS, которые увеличиваютсяспектакль.Вы можете создать приложение в режиме --prod для повышения производительности

Ссылка: https://www.protectator.ch/post/optimizing-performance-of-an-ionic-3-application

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';
import {enableProdMode} from "@angular/core";

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);