首页 > 解决方案 > ionic cli 4.5.0 样式属性不适用

问题描述

我是离子框架的新手,所以我真的需要你的帮助。我的问题是,每当我向 ionic UI 组件添加属性时,它根本不起作用。例如:

<button ion-button color="secondary" clear>Secondary Clear</button>
<ion ion-button color="light" outline>Light Outline</button>
 <button ion-button full>Full Button</button>

颜色确实适用,但它们的属性不适用。另一个例子是

<ion-list>

  <ion-item>
    <ion-label floating>Username</ion-label>
    <ion-input type="text"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label floating>Password</ion-label>
    <ion-input type="password"></ion-input>
  </ion-item>

</ion-list>

对于这个,浮动属性也不适用。所以我意识到离子属性实际上并不适合我,我不知道为什么。这是我的 app.module.ts 文件

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, HttpModule,  IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

标签: ionic-frameworkionic4

解决方案


app.module.ts应该是这样的:

@NgModule({
  declarations: [
    MyApp,
    HomePage // declear your Page inside declarations
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpClientModule,
    HttpModule,
    IonicStorageModule.forRoot(),

  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage // ALSO inside bootstrap entryComponemt
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler,}
  ]
})
export class AppModule {}

这将为您解决问题。


推荐阅读