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.访问测试