zoukankan      html  css  js  c++  java
  • ionic 编写自定义控件

    1. 创建组件
      在项目所在目录下执行:
    ionic g component <ComponentName>
    
    1. 在src/components中会出现:
    ——components
        |——ComponentName
                |——ComponentName.html
                |——ComponentName.scss
                |——ComponentName.ts
              |——components.module.ts
    
    1. 组件模块:
    • ComponentName.html
    <div class="progress-outer">
      <div class="progress-inner" [style.width]="progress +'%'">
        {{showProgress}}%
      </div>
    </div>
    
    • ComponentName.scss
    progress-bar {
      .progress-outer{
         96%;
        margin:10px 2%;
        padding: 3px;
        text-align: center;
        background-color: #f4f4f4;
        border:1px solid #dcdcdc;
        color: #fff;
        border-radius: 20px;
      }
    
      .progress-inner{
        min- 15%;
        white-space: nowrap;
        overflow: hidden;
        padding: 5px;
        border-radius: 20px;
        background-color: map_get($colors,primary);
      }
    }
    
    • ComponentName.ts
    import {Component, Input} from '@angular/core';
    
    @Component({
      selector: 'progress-bar',
      templateUrl: 'progress-bar.html'
    })
    export class ProgressBarComponent {
    
    
      @Input('progress') progress:Number;
      @Input('showProgress') showProgress:Number;
    
      constructor() {
        console.log('Hello ProgressBarComponent Component');
    
      }
    
    }
    
    1. 组件通讯
    • @Input
    • @Output
    • my.ts:
    import {Component, EventEmitter, Input, Output} from '@angular/core';
    
    /**
     * Generated class for the MyComponent component.
     *
     * See https://angular.io/api/core/Component for more info on Angular
     * Components.
     */
    @Component({
      selector: 'my',
      templateUrl: 'my.html'
    })
    export class MyComponent {
    
      @Input('data') data: string;
      @Output() parentClick=new EventEmitter();
    
      constructor() {
        console.log('Hello MyComponent Component');
    
      }
      MCClick(){
        this.parentClick.emit({
          from:this.data
        })
      }
    
    }
    
    • my.html:
    <div (click)="MCClick()" class="red-text">from {{data}}</div>
    
    1. 引入自定义控件
    • 在src/app/app.module.ts引入ComponentNameComponent
    import { NgModule, ErrorHandler } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
    import { MyApp } from './app.component';
    ..........
    
    import {ComponentsModule} from "../components/components.module"
    
    @NgModule({
      declarations: [
        MyApp,
        ....
        //ProgressBarComponent
      ],
      imports: [
        BrowserModule,
        IonicModule.forRoot(MyApp),
        ComponentsModule
      ],
      bootstrap: [IonicApp],
      entryComponents: [
        MyApp,
        ....
      ],
      providers: [
        StatusBar,
        SplashScreen,
        {provide: ErrorHandler, useClass: IonicErrorHandler}
      ]
    })
    export class AppModule {}
    
    • 在使用自定义组件的页面所在的module中引入
    ...
    import {ComponentsModule} from "../../components/components.module"
    ...
    @NgModule({
      declarations: [
        ...
      ],
      imports: [
        ...
        ComponentsModule
      ]
    })
    export class MyModule{
      ...
      ...
    }
    
    
    
    • 然后就可以在页面中使用了:
    <ion-header>
    
      <ion-navbar>
        <ion-title>testProgressBar</ion-title>
      </ion-navbar>
    
    </ion-header>
    
    
    <ion-content padding>
      <progress-bar [progress]="loadProgress1" [showProgress]="loadProgress"></progress-bar>
    </ion-content>
    

    参考网址:
    http://e2web.cn/2017/02/27/
    http://blog.csdn.net/github_36704158/article/details/76355989

  • 相关阅读:
    mssql 循环的写法,备用
    用了十几年的windows记录下我不知道的几个快捷键
    折腾了下java下webservice,折腾了大半天,居然是eclipse的版本不对
    连接Linux 下mysql 慢的问题,解决之
    解决windows7蓝屏的方法
    MySQL錯誤:Value '00000000' can not be represented as java.sql.Date解決方法[转]
    jdbc连接三种数据库的连接语句写法(备查)
    遇到一个json解析的错误,费了好大的劲,最后发现是少了一个包
    【转】The reference to entity "characterEncoding" must end with the ';' delimiter
    synaptics 插入USB鼠标禁用,网上
  • 原文地址:https://www.cnblogs.com/libertycode/p/8421438.html
Copyright © 2011-2022 走看看