Angular知识点复习

Angular第三方UI组件库(github搜“awesome angular ")-----lonic

概述：是一个第三方的适用于移动端App的UI组件库，可以与Angular/React/Vue.js组合，也可以独立使用。

九种主题色：primary、secondary、tertiary、danger、warning、success、dark、medium、light

1、页面结构：<ion-app>

<ion-header>

<ion-toolbar>

<ion-title></ion-title>

</ion-toolbar>

</ion-header>

<ion-content></ion-content>

<ion-footer></ion-footer>

<ion-app>

2、布局系统：

<ion-grid>

<ion-row>

<ion-col  size="6" offse="" push=""    pull=""></ion-col>

</ion-row>

</ion-grid>

3、徽章：

<ion-badge color=""></ion-badge>

4、图标：<ion-icon name="home"></ion-icon>

5、输入框：

<ion-item>

<ion-label  position="fixed/stacked/floating">提示文字</ion-label>

<ion-input></ion-input>

</ion-item>

6.搜索框：<ion-searchbar></ion-searchbar>

7.按钮:

<ion-button  color=""   size="small/large"

expand="block/full" shape="round" fill="solid(实心)/outline(空心)/clear(没有背景色和边框)">文字+图标</ion-button>

8.卡片：

<ion-card>

<img>

<ion-card-header>ion-card-title/subtitle</ion-card-header>

<ion-card-content></ion-card-content>

</ion-card>

<ion-card>

<ion-item></ion-item>

...

</ion-card>

9.轮播广告

<ion-slides  pager="true"  #mySlides>

<ion-slide>文字/图片</ion-slide>

....

</ion-slides>

@ViewChild('mySlides',{static:true})

private  mySlides

ngOninit(){

this.mySlides.startAutoplay()

}

10.列表项

<ion-item detail="true" href="#" (click)="">

<ion-avatar/thumbnail slot="start"></ion-avatar/thumbnail>

<ion-label></ion-label>

<ion-button slot="end">

<ion-icon slot="start"></ion-icon>

</ion-button>

</ion-item>

11.列表

<ion-list>

<ion-list-header></ion-list-header>

<ion-item></ion-item>

</ion-list>

12.无限滚动

<ion-infinite-scroll   threshold="50px"  (ionfinite)="loadMore($event)">

<ion-infinite-scroll-content  loadingText="加载中...."   loadingSpinner="bubblue">

</ion-infinite-scroll-content>

</ion-infinite-scroll>

loadMore(ev){

//加载数据....

ev.target.complete()

}

13.弹出框(ActionSheet/Alert/Modal)

constructor(private  alertController:AlertController){   }

this.alertController.create({

header:' ',

message:' ',

buttons:[' ',' ']

}).then( ( dialog) =>{

dialog.present()

})

14.标签页和导航系统

1.创建路由词典

const  routes =[

{path:'index',component:IndexComponent}

]

2.注册路由词典

imports:[  RouterModule.forRoot(routes) ]

3.声明路由出口

<ion-router-outlet></ion-router-outlet>

4.使用标签页组件，关联路由地址

<ion-tabs>

<ion-tab-bar  slot="bottom/top">

<ion-tab-button  tab="index">

ion-icon +文字

</ion-tab-button>

</ion-tab-bar>

</ion-tabs>

5.访问测试