Ionic 2 (3) fügt keine spezifischen Klassen hinzu

Question

Ich habe ein externes Modul, das ich in meiner App verwende.

Die gemeinsam genutzte Modul-Header

import {Component, OnDestroy, OnInit, Input} from '@angular/core'; 
import {Subject} from 'rxjs/Subject'; 
import 'rxjs/add/operator/takeUntil'; 
import {Nav} from 'ionic-angular'; 


@Component({ 
    selector: 'hg-page-header', 
    template: ` 
     <ion-header> 
      <ion-navbar [class]="navbarClass"> 
       <button ion-button menuToggle end *ngIf="menuToggleRight"> 
        <ion-icon [name]="iconName"></ion-icon> 
       </button> 
       <button ion-button menuToggle *ngIf="!menuToggleRight"> 
        <ion-icon [name]="iconName"></ion-icon> 
       </button> 
       <ion-title [class]="navbarTitleClass">{{ title | translate}}</ion-title> 
      </ion-navbar> 
     </ion-header> 
    ` 
}) 
export class PageHeaderComponent implements OnInit, OnDestroy { 

    private ngUnSubscribe: Subject<void> = new Subject<void>(); 
    @Input() navbarClass: string; 
    @Input() navbarTitleClass: string; 
    @Input() title: string; 
    @Input() iconName: string; 
    @Input() menuToggleRight: boolean; 

    constructor() { 
    } 

    private setListeners(): void { 
    } 

    ngOnInit() { 
     this.setListeners(); 
    } 

    ngOnDestroy() { 
     this.ngUnSubscribe.next(); 
     this.ngUnSubscribe.complete(); 
    } 
} 

Die externe module.ts Datei

import {NgModule, ModuleWithProviders, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; 
import {TranslateModule} from '@ngx-translate/core'; 
import {IonicModule} from 'ionic-angular'; 

import {ISharedModuleConfig} from './models/shared-config.model'; 
import {PageHeaderComponent} from './components/page-header/page-header.component'; 
import {MenuComponent} from './components/menu/menu.component'; 


@NgModule({ 
    declarations: [ 
     //Component 
     PageHeaderComponent, 
     MenuComponent 
    ], 
    imports: [ 
     IonicModule, 
     TranslateModule.forRoot() 
    ], 
    exports: [ 
     //Component 
     PageHeaderComponent, 
     MenuComponent 
    ], 
    providers: [], 
    schemas: [CUSTOM_ELEMENTS_SCHEMA] 
}) 

export class SharedModule { 
    static forRoot(sharedModuleConfig: ISharedModuleConfig): ModuleWithProviders { 
     return { 
      ngModule: SharedModule, 
      providers: [ 
       {provide: 'ISharedModuleConfig', useValue: sharedModuleConfig} 
      ] 
     }; 
    } 
} 

Wie ich es verwende

<hg-page-header *ngIf="findMenuItemByComponent(nav?.getActive()?.component)?.showMainMenu" [iconName]="'menu'" 
       [navbarClass]="'toolbar toolbar-ios toolbar-md'" [navbarTitleClass]="'title title-ios title-md'" 
       [title]="nav?.getActive()?.component.name" [menuToggleRight]="true"></hg-page-header> 

Als ich die Klassen wie das obige Beispiel passieren, es funktioniert und alles ist gestylt und das ionische Styling ist in Ordnung.

Aber wenn ich die Klassen aus dem HTML entfernen und die [class]="variable" - ionische fügt es nicht von selbst. Die problematischen Artikel sind ion-navbar und ion-title.

Answer 1

fand ich das Problem mit Hilfe von einem Freund

Die [class] Richtlinie wird die Standardklassen, die durch ionische ÜBERSCHREIBEN

hinzugefügt werden