angular-2

创建组件

在项目根目录运行 ng g c 文件夹/组件名称
ng g c components/child
创建完成后会生成组件文件夹
`

html绑定

[innerHTML]="xxx"

属性绑定

[属性]=xxx

class绑定

[class]="xxx"
[class.active]="布尔值"
[ngClass]="{key1:布尔值,key2:布尔值}"

组件装饰器

@Component({
  selector: 'app-child',    // 引用的标签
  templateUrl: './child.component.html',    // 组件的模板路径
  styleUrls: ['./child.component.css']      // 组件的css路径
})

组件的类

export class ChildComponent implements OnInit {

}

// implements 实现接口
// OnInit 组件的生命周期-初始化

组件参数的传递

父传子

 
 @Input() list:string[];

子传父

 @Output() selNum=new EventEmitter();
selNum.emit("数据")

父获取子 通过ref

{{child2.list}}
child的list数据必须是public

Ref

 import { Component, ViewChild, ElementRef,QueryList,ViewChildren } from '@angular/core';
// 导入组件
@ViewChild("refp",{static:true}) refp:ElementRef;
// 获取操作dom
ngAfterViewInit(){
    this.refp.nativeElement //真正的dom节点 
}


@ViewChildren("myitem") myitem:QueryList;
ngAfterViewInit(){
    this.myitem.forEach(el=>{
      el.nativeElement //真正的节点
    })
  }

服务service

组件间共享的数据和方法提供服务的

创建 ng g s 文件夹/服务名称

ng g s service/search

使用

import {SearchService} from "xxx";
// 导入
constructor （private SearchService:SearchService){}
// 使用
this.SearchService.xxx