angular4 + ts + es6 自造輪子，理解組件化操做。以及怎麼應用一些須要數據展現的組件

一、爲何要將某個功能塊拿出來作成一個組件。

二、改組件應該考慮哪些可塑性或者或使用者怎麼進行自定義。

三、組件實現了什麼功能？

四、怎麼使用組件與當前的程序嵌合

 

eg:下拉選組件的製造

1、造組件

webstrom 的cmd(左下角的灰色方塊點開選terminal)控制檯能夠快速建立組件。

html代碼

<div class="row text-center base-dropdawn">

<div class="col">

<div ngbDropdown class="d-inline-block">

<button class="btn btn-outline-primary show-plan" id="dropdownBasic1" ngbDropdownToggle [ngStyle]="showStyle">{{showData[code]}}

<span class="glyphicon glyphicon-menu-down"></span>

</button>

<div class="select-plan" ngbDropdownMenu aria-labelledby="dropdownBasic1">

<!-- <button class="dropdown-item" (click)="checkSelect($event)"[ngStyle]="selectStyle">Action - 1</button>

<button class="dropdown-item" (click)="checkSelect($event)"[ngStyle]="selectStyle">Another Action</button>

<button class="dropdown-item" (click)="checkSelect($event)"[ngStyle]="selectStyle">Something elsehhhhhhh</button>-->

<button class="dropdown-item" *ngFor="let select of selectData, index as i" (click)="checkSelect($event,i)"[ngStyle]="selectStyle" [ngClass]="{'active': isIndex===i}">{{select}}</button>

</div>

</div>

</div>

</div>

ts代碼

import {Component, OnInit, Output, EventEmitter, Input} from '@angular/core';

 

@Component({

selector: 'app-dropdawn',

templateUrl: './dropdawn.component.html',

styleUrls: ['./dropdawn.component.css']

})

export class DropdawnComponent implements OnInit {

showData: Array<any> = []; // 要展現的下拉選的數組

isIndex: number = 0; // 選中哪一個選擇項，默認爲第一個

@Input() initShow: string = '';

@Input() showStyle: any= {}; // 展現面板的樣式數據

@Input() selectStyle: any= {}; // 下拉麪板的樣式數據

@Input() selectData: any = []; // 待選擇的下拉列表的數組

@Input() code: string = '';

@Output() selectChange: EventEmitter<any> = new EventEmitter<any>(); // 返回數據結構

constructor() {

}

 

ngOnInit() {

// 初始化數據

this.showData[this.code] = '請選擇';

this.showData[this.code] = this.initShow || '請選擇'; // 若是須要初始化能夠賦值

this.selectData = ['上對個人', 'wwrweg d', '3r3f3'] ;

this.showStyle = {

color: '#666',

background: '#fff',

width: '120px',

height: '24px'

};

this.selectStyle = {

color: '#666',

background: '#fff',

width: '120px',

height: '24px'

};

 

}

checkSelect(event, i) {

const _event = event.target;

this.showData[this.code] = _event.innerText;

debugger;

// 判斷哪一個是正在激活的

this.isIndex = i;

console.log( this.showData);

this.selectChange.emit(this.showData);

}

 

}

css代碼

.base-dropdawn button{

width:120px ;

height:24px;

line-height: 24px;

padding: 0;

padding-left: 5px;

margin: 0 auto ;

white-space:nowrap;

text-align: left;

text-overflow:ellipsis;

overflow: hidden;

}

/*固定下拉圖標的位置*/

.base-dropdawn .show-plan{

position: relative;

}

.base-dropdawn .show-plan .glyphicon {

position: absolute;

top: 5px;

right: 5px;

}

.base-dropdawn .show-plan{

border: 1px solid #CCCCCC;

border-radius: 4px;

}

.base-dropdawn .select-plan{

overflow: hidden;

border-radius: 0;

width:122px ;

min-width: 60px;

padding: 0;

border-bottom-left-radius: 4px;

border-bottom-right-radius: 4px;

}

.base-dropdawn .select-plan button{

border: 0;

}

.base-dropdawn .select-plan button:hover{

background: #3484f5 !important;

color:#fff !important;

}

.active{

background: #3484f5 !important;

color:#fff !important;

}

 

 

 

2、其餘組件調用

a、HTML代碼(第一個初始化數據的，第二個沒有初始化數據)

<app-dropdawn [code]="'demo'"[initShow]="this.showData[0].value" (selectChange)="selectChangeShow($event)"></app-dropdawn>

<app-dropdawn [code]="'work'" (selectChange)="selectChangeShow($event)"></app-dropdawn>

 

b、ts代碼

 import {Component, OnInit} from '@angular/core';

import {Router} from '@angular/router';

import {UserService} from '../../service/user/user.service';

 

// 引入狀態碼

import { ERR_OK/*, ERR_OUTTIME*/ } from '../../../assets/configs/config';

// 引入狀態管理

import { Store } from '@ngrx/store';

import { SET } from '../../store/user.reducer';

 

 

// 引入表單控制模塊

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

 

@Component({

  selector: 'app-login',

  templateUrl: './login.component.html',

  styleUrls: ['./login.component.css']

})

export class LoginComponent implements OnInit {

  // demo

  showData: Array<any> = [];

 

  userForm: FormGroup;                // 登陸錄入信息

 

  loginType: number = 1;             // 登陸角色 1-會員 2-管理員

 

  showBtnGroup: boolean = true;     // 按鈕

  showLoginForm: boolean = false;  // 是否顯示登陸框

  showRegistry: boolean = false;   // 是否顯示註冊框

  onSubmit: boolean = false;

 

  userInfo: object = {

    uuid: '',

    captcha: ''

  };

 

  constructor(

    private router: Router,

    private userService: UserService,

    private store: Store<object>,

    private fb: FormBuilder

  ) {

    this.userForm = fb.group({

      username: ['', [Validators.required, Validators.pattern(/^\d{11}$/)]],  // 用戶名當前爲 11位手機號碼

      userpwd: ['', [Validators.required]],

      vcode: ['', [Validators.required, Validators.pattern(/^\d{4}$/)]]       // 驗證碼當前爲 4位數字組合

    }, {validator: null});

  }

 

  ngOnInit() {

    // this.getCode();

    //demo

    this.showData = [

      {code: 'demo',

        value: ''

      },

      {code: 'work',

        value: ''

      }

    ];

  }

  /**

   * @desc 變動登陸角色

   * @param type 角色類型 1-會員 2-管理員

   * */

  loginTypeChange(type) {

    this.showBtnGroup = false;

    this.showLoginForm = true;

    this.loginType = type;

  }

 

  /**

   * @desc 判斷顯示登陸框或者註冊框

   * @param type 1-登陸 2-註冊

   * */

  btnClick(type) {

    this.showBtnGroup = false;

    this.showLoginForm = type === 1;

    this.showRegistry = type === 2;

  }

 

  /**

   * @desc 執行登陸

   * @param null

   * */

  doLogin() {

    this.onSubmit = true;

    Object.values(this.userForm.controls).forEach(val => val.disable());

    this.userService.login(Object.assign({}, this.userInfo, this.userForm.value)).then(res => {

      if (res && res[2].ANS_MSG_HDR.MSG_CODE === ERR_OK) {

        sessionStorage.setItem('SESSION_INFO', res[0][0].SESSION);

        sessionStorage.setItem('OP_USER', res[0][0].USER_CODE);

        sessionStorage.setItem('OP_ROLE', res[0][0].USER_ROLES.substr(0, 1));

        sessionStorage.setItem('OP_TYPE', this.loginType + '');                     // 記錄是會員登陸仍是管理員登陸

        sessionStorage.setItem('ACCOUNT', JSON.stringify(res[0][0]));

        this.store.dispatch({type: SET, payload: res[0][0]});

        this.router.navigate(['/home']);

      } else /*if (res && res[2].ANS_MSG_HDR.MSG_CODE === ERR_OUTTIME) */{

        this.getCode();

      }

      this.onSubmit = false;

      Object.values(this.userForm.controls).forEach(val => val.enable());

    }).catch(err => {

      this.onSubmit = false;

      Object.values(this.userForm.controls).forEach(val => val.enable());

    });

  }

 

  // 獲取文件服務器返回的數據示例，判斷e的數據類型

  selectChangeShow(e) {

    debugger

    console.log(Object.prototype.toString.call(e));

    // Object.prototype.toString.call(e)最精準的判斷對象類型的方法，除此以外有instanceof 和typeof

   // instanceof運算符用來判斷一個構造函數的prototype屬性所指向的對象是否存在另一個要檢測對象的原型鏈上console.log(Object instanceof Object); //true

   //typeof typeof操做符返回一個字符串，表示未經計算的操做數的類型。 不能區分對象、數組、正則，對它們操做都返回"object"

console.log(typeof 42);
  // expected output: "number"

    if (Object.prototype.toString.call(e) === '[object Array]') {

      this.showData.forEach(val => {

        const d = e[val.code];

        if (d) {

          val.value = d;

        }

      });

    }

    console.log(this.showData);

  }

  /**

   * @desc 獲取圖形驗證碼

   * @param null

   * */

  getCode() {

    Object.assign(this.userInfo, this.userService.getCaptcha());

  }

}

 

3、

父組件與子組件經過本地變量互動

 

父組件經過#timer得到子組件的全部屬性和方法

註釋：typeof運算後返回的結果有