1、为什么要将某个功能块拿出来做成一个组件。

2、改组件应该考虑哪些可塑性或者或使用者怎么进行自定义。

3、组件实现了什么功能？

4、怎么使用组件与当前的程序嵌合

 

eg:下拉选组件的制造

一、造组件

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;

}

 

 

 

二、其他组件调用

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());

  }

}

 

三、

父组件与子组件通过本地变量互动

 

父组件通过#timer获得子组件的所有属性和方法

注释：typeof运算后返回的结果有