angular之关于Ionic的使用
官网:https://ionicframework.com/docs/intro安装:npm install @ionic/angular@latest --save使用:(1)在app.module.ts文件中引入import { IonicModule } from "@ionic/angular";(2)添加到 AppModule 的 imports 数组中...
·
官网:https://ionicframework.com/docs/intro
安装:
npm install @ionic/angular@latest --save
使用:
(1)在app.module.ts文件中引入
import { IonicModule } from "@ionic/angular";
(2)添加到 AppModule 的 imports 数组中
imports: [
AppRoutingModule,
IonicModule,
BrowserModule
]
(3)具体内容如下:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { IonicModule } from "@ionic/angular";
import { AppComponent } from './app.component';
import { FooterGuideComponent } from './components/footer-guide/footer-guide.component';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
declarations: [
AppComponent,
FooterGuideComponent
],
imports: [
AppRoutingModule,
IonicModule.forRoot(),
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
遇到的问题:
如果你只是安装了ionic但没有在app.module.ts文件中的imports中注册,就会报错如下:
解决: 在app.module.ts中引入并注册即可

Ionic样式修改
- 修改全局样式:
在angular.json文件中的styles中添加你的样式路径如下:"styles": [ "src/styles.css", { "input": "src/global.scss" } ], - 在global文件中添加:root即可修改全局样式,如下代码:
// http://ionicframework.com/docs/theming/ @import '~@ionic/angular/css/ionic.bundle.css'; @import '~@ionic/angular/css/utils.bundle.css'; @import '~@ionic/angular/css/global.bundle.css'; /* Core CSS required for Ionic components to work properly */ @import "~@ionic/angular/css/core.css"; /* Basic CSS for apps built with Ionic */ @import "~@ionic/angular/css/normalize.css"; @import "~@ionic/angular/css/structure.css"; @import "~@ionic/angular/css/typography.css"; /* Optional CSS utils that can be commented out */ @import "~@ionic/angular/css/padding.css"; @import "~@ionic/angular/css/float-elements.css"; @import "~@ionic/angular/css/text-alignment.css"; @import "~@ionic/angular/css/text-transformation.css"; @import "~@ionic/angular/css/flex-utils.css"; @import "~@ionic/angular/css/display.css"; /* Custome CSS */ // @import "theme/themes/default-theme"; // @import "theme/variables"; :root { --ion-color-primary: #F05A23; } :host { -webkit-padding-start: 0; -webkit-padding-end: 0; }npm引入bootstrap
-
npm install bootstrap@4 --save-dev @4是版本号angular.json中配置即可
"styles": [ "src/styles.css", "node_modules/bootstrap/dist/css/bootstrap.css" ],
更多推荐


所有评论(0)